组件通信三种

在发送数据的兄弟组件中，使用 bus.$emit(‘事件名称’, 要发送的数据) 来向外发送参数

1.父组件向子组件传值

1.子组件在props中创建一个属性，用于接收父组件传过来的值；
2.父组件 引入子组件–>注册子组件–>引用子组件；
3.在子组件标签中添加子组件props中创建的属性；
4.将所要传递的值赋值给该属性。

父组件parent.vue

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>

. 子组件son代码

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子组件接收到内容：{{ faMsg }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子组件',
     }
   },
   props:['faMsg'],//接收psMsg值
 }
</script>

 

2.子组件向父组件传值（通过事件形式）

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

子组件

<template>
  <div>
    <h1>children</h1>
      <button @click="sendTOParent">向父组件传值</button>
  </div>
</template>>
<script>
export default {
  data() {
    return {
      data: "子组件中的信息"
    };
  },
  methods:{
        sendTOParent(){
            this.$emit('listenToChildEvent',this.data)
        }
    }
};
</script>>

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法。
父子间代码

<template>
  <div>
    <h1>我是父组件</h1>
    <children v-on:listenToChildEvent = 'showMsgfromChild'></children>
  </div>
</template>>
<script>
import Children from "./Children";
export default {
  data() {
    return {
    };
  },
   methods:{
        showMsgfromChild(data){
            console.log(data)
        }
    },
   components: {
    Children
  },
};
</script>

3.兄弟组件互传

定义模块 src/bus.js，内容就是导入Vue模块，并导出一个Vue实例对象

import Vue from 'vue'
export default new Vue() 

在各个兄弟组件中，导入 bus.js 模块

在接收数据的兄弟组件的 created 生命周期方法里(使得事件及时响应)，发送数据的组件中声明

使用 bus.$on(‘事件名称’, (接收的数据) => {}) 定义事件成员方法