Vue中父子组件之间的通信

Vue很重要的一点就是组件化开发，那么如果在两个组件之间通信，即在两个组件之间传输数据呢？可以分为两部分来看

1. 父组件如何传递信息给子组件
2. 子组件如何传递消息给父组件

1. 父组件传递数据给子组件

通过props的方式实现

父组件可以直接通过props来向子组件传输数据
父组件：

<template>
  <div id="app">
    <child :names="names" v-on:msgChange="msgChange"/>
  </div>
</template>
<script>
import Child from './components/Child.vue'
export default {
  name: 'App',
  components: {
    Child
  },
  data() {
    return {
      names: ['Jenly','Hary','Kook','Hnony']
    }
  },
  methods: {
    msgChange(val){
      console.log('val:', val);
    }
  },
}
</script>
<style>

子组件：

<template>
  <div>
    <div v-for="(item,index) in names" :key="index">{{ item }}</div>
    <input type="text" v-model="msg">
    <button @click="handleMsgChange">点击发送</button>
  </div>
</template>
<script>
export default {
  name: 'Child',
  data() {
    return {
      msg: ''
    }
  },
  props: {
    names: {
      required: true,
      type: Array
    }
  },
  methods: {
    handleMsgChange(){
      this.$emit('msgChange',this.msg);
    }
  },
}
</script>
<style scoped>
</style>

2. 子组件传递数据给父组件

子组件向父组件传输数据的方式是通过事件的方式

可以使用this.$emit来通过绑定的事件向父组件发送消息，实际就是把子组件自己的数据发送给父组件

<template>
  <div id="app">
    <child :names="names" v-on:msgChange="msgChange"/>
  </div>
</template>
<script>
import Child from './components/Child.vue'
export default {
  name: 'App',
  components: {
    Child
  },
  data() {
    return {
      names: ['Jenly','Hary','Kook','Hnony']
    }
  },
  methods: {
    msgChange(val){
      console.log('child val:', val);
    }
  },
}
</script>
<style>

<template>
  <div>
    <div v-for="(item,index) in names" :key="index">{{ item }}</div>
    <input type="text" v-model="msg">
    <button @click="handleMsgChange">点击发送</button>
  </div>
</template>
<script>
export default {
  name: 'Child',
  data() {
    return {
      msg: ''
    }
  },
  props: {
    names: {
      required: true,
      type: Array
    }
  },
  methods: {
    handleMsgChange(){
      this.$emit('msgChange',this.msg);
    }
  },
}
</script>
<style scoped>
</style>

3. 使用订阅和发布来获取消息

如果A组件想要收到来自B组件的消息，那么可以在A组件中订阅消息，在B组件中收到消息，订阅的回调存在A组件中，并且回调最好使用箭头函数的形式

app.vue

<template>
  <div id="app">
    <student />
    <school />
  </div>
</template>
<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  components: {
    School,
    Student
  },
  data() {
    return {
      names: ['Jenly','Hary','Kook','Hnony']
    }
  },
  methods: {
  },
}
</script>
<style>

student.vue

<template>
  <div>
      <div @click="showName">姓名：{{ name }}</div>
      <div>性别：{{ gender }}</div>
      <div>年龄：{{ age }}</div>
  </div>
</template>
<script>
import {mixin} from '../mixin';
import pubsub from 'pubsub-js';
export default {
    name: 'School',
    data() {
        return {
            name: 'yxr',
            gender: '男',
            age: 18
        }
    },
    mixins: [mixin],
    mounted() {
        this.pubId = pubsub.subscribe('school_msg',(name,val) => {
            console.log('student收到消息，消息名为：', name, '消息内容为：', val);
        })
    },
    beforeDestroy() {
        pubsub.unsubscribe(this.pubId);
    },
}
</script>

school.vue

<template>
  <div class="demo">
    <h2 @click="showName" class="name">学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <input type="text" v-model="msg">
    <button @click="sendMsg">点击发送消息</button>
  </div>
</template>
<script>
import pubsub from 'pubsub-js';
import {mixin} from '../mixin';
export default {
    name: 'School',
    data() {
        return{
            name: '三峡大学',
            address: '宜昌市',
            msg: ''
        }
    },
    methods: {
        sendMsg(){
            pubsub.publish('school_msg','xx学生你好！');
        }
    },
    mixins: [mixin]
}
</script>
<style lang="less">
    .demo{
        background-color: aqua;
        .name{
            color: red
        }
    }
</style>