Vue组件之间的几种通信方式

1.父子之间的通信
父子组件通信
1. 父组件中定义一个数据
2. 在父组件的模板中，用 v-bind 将父组件的数据绑定在子组件身上

3. 在子组件的选项中，通过props选项来接收这个属性
4. 这个属性可以在子组件的模板中以全局变量的形式使用
总结：父子之间的通信主要是通过props来实现的，父组件通过v-bind绑定数据，然后子组件通过props拿到数据
扩展：props是可以做数据验证的（不符合直接报错）

//父组件

         <template id="father">
              <div>
                <h3> 这里是父组件 </h3>
                <hr>
                <Son :aa = "money"></Son>
              </div>
            </template>
    
    //子组件

<template id="son">
      <div>
        <h4> 这里是子组件 </h4>
        <p> 老爸给了我  {{ aa }} 生活费 </p>
      </div>
    </template>


Vue.component('Father',{
          template:'#father',
          data(){
              return{
                  money:1000
              }         
          }
    })
    Vue.component('Son',{
        template:'#son',
        props:['aa'],// prop 可以通过 v-bind 动态赋值
        props:{//用于判断拿到的值得类型
            'aa':Number,
        },
        props:{//用于判断aa的数值大小或者范围，若错误则直接报错不输出
            'aa':{
                validator(val){//验证数据
                   return val===1000
                }
            }
        }
    })

2.子父之间的通信
vue是单向数据传递的，如果子组件直接改变父组件传过来的数据是不允许的。但是可以通过触发事件通知父组件改变数据，实现改变子组件的目的。
总结：子父通信主要是this.$emit和子组件上绑定的处理函数

1. 给子组件中定义一个数据

   这是子级数据

3.非父子组件之间的通信
（一）非父子组件之间的通信是通过在简单的场景下，可以使用一个空的 Vue 实例作为事件总线。原理就是把 Vue 实例当作一个中转站。
使用一个空的 Vue 实例作为事件总线

  var bus = new Vue()

一个字组件的操作使用挂载方法自定义执行（mounted），只要组件创建，它就自动执行
通过$on自定义一个aa的事件，传递数据给另一个字组件

Vue.component('Son',{
    template: '#son',
    data () {
      return {
        flag: false
      }
    },
    methods: {
      cry () {
        this.flag = true
      }
    },
    mounted () { //这个选项表示组件挂载结束   这个方法时自定执行，只要组件创建，它就自动执行
      // bus.$on(自定义事件的名称，自定义事件的处理程序)
      var  _this = this 
      bus.$on('aa',function () { // 通过$on自定义一个叫做aa的事件 
        _this.cry()
      })
    }
  })

操作的子组件通过bus.$emit()来获取aa事件

 Vue.component('Girl',{
    template: '#girl',
    methods: {
      kick () {
        bus.$emit('aa')
      }
    }
  })

（二）该非父子通信利用一个子级将事件传给父级，然后父级将返回值给需要操作的另一个子级，从而俩个子级进行通信了

核心：父级的kit方法给了操作的子组件

<template id="father">
        <div>
        <h3>这是父级组件</h3>
        <!-- <button @click="print">输出this</button> -->
        <boy :fn="kit"></boy>
        <!-- 在父级中拿到另一个子组件的操作方法 -->
        <hr>
        <girl ref="girl"></girl>
        </div>
    </template>

父级组件作为中转站，拿到一个子组件的方法然后给另一个操作的子组件

 Vue.component('Father',{
        template:'#father',
        methods: {
            print(){
                console.log(this)
            },
            kit(){
                this.$refs.girl.cry()//父级拿到操作一个子组件的方法，然后另一个子组件对其进行操作
            }
        },
    })

操作的子组件

Vue.component('Boy',{
        template:'#boy',
        props:['fn'],//通过props拿到父级定义的方法
    })

被操作子组件

Vue.component('Girl',{
        template:'#girl',
        data(){
            return {
                flag:false,
            }
        },
        methods:{
            cry(){
                this.flag=!this.flag
            }
        },
    })