vue组件通信基础常用方式

组件关系：父子关系，非父子关系

通信方式：

1. 父子通信 ：  父组件的数据传递给子组件  【子组件props接收】
2. 子父通信 ：  子组件的通信传递给父组件  【$emit()】
3. 非父子通信  ：  非父子关系组件之间的数据通信

 父子通信步骤：

1. 数据传递    子组件绑定自定义属性，传递要传递的数据

   <son :father-meg="fatherMeg"></son>

   （father-meg为自定义属性名   fatherMeg为传给子组件的数据）

2. 数据接收      props属性接收数据   数据名使用小驼峰 

   components:{
           "son":{
             template:'#son',
             props:["fatherMeg"],
             data(){
               return {meg:"子组件数据"}
             }

   【注意】接收名使用小驼峰式命名，组件标签中使用对应短横分隔命名                       

3. 数据应用     在子组件定义中{{}}引用接收的数据

单向数据流（父 ==> 子）   props  ：

（子组件不可直接修改父组件传来的基本数据类型，复杂数据类型可被同步修改，复杂数据类型传递的本质是传递其存储地址，修改其数据时，存储地址并没有改变，）

如果需要父组件中的值更新时传递给子组件，同时子组件也可以自己更新：

注意：定义props中对象类型的默认值时，默认值为复杂数据类型时，以函数形式定义default 并return复杂类型的数据

watch监听属性  监听父组件的更新，可实现同步更新

 子父通信步骤：

1. 父组件  传递一个方法 ，子组件接收

   <son @自定义方法名 = "父组件方法"></son>

2. 子组件在自身事件中调用该方法， 同时将自身数据作为参数传递过去

   methods:{
     fun(){
               this.$emit("接收父组件方法的自定义名","参数1",...);
           }
   }

3. 父组件可调用 子组件传来的数据（即参数）

 methods:{
        getfather(data){
          console.log(data[1]);
        }
      }

非父子通信

两个解决方案：

1.bus: 中央事件总线

2.vuex 状态管理

中央事件总线  原理：利用一个空的vue实例作为中央事件总线，来完成两个组件间的数据通信。

 步骤：

1. 创建一个空的vue实例（全局）
2. 在接收方的created或mounted钩子函数中，监听一个自定义事件。在该事件中定义一个参数，作为接收数据的容器；

   bus.$on('自定义事件名',(data)=>{
          // data 是接收到的数据
       }
   )

3. 在发送方使用 bus.$emit('自定义事件名'，要传递的数据) 触发函数，并传递数据

 nextTick：（解决vue异步更新问题）

vue检测到数据变化时，并不会直接更新dom，而是开启一个队列，将同一事件循环中发生的所有数据变化放入到队列中。等到下一个事件循环开启，vue会刷新队列并执行实际dom操作。

ref属性   可直接在vue中使用$refs获取dom节点,也可以访问子组件

<div ref="box"</div>

console.log(this.$refs.box);

【注释：】访问子组件时：$refs只在组件渲染完成后才填充，并且它是非响应式的。仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算机属性中 使用$refs