vue组件通信

组件通信是单向的

父子组件通信

父组件将自己的数据传递给子组件

1. 父组件将自己的数据通过属性绑定的形式传递给子组件
   

2. 子组件在自己的配置项中通过 props 来接收这个属性
   Vue.component(‘Son’,{
   template: ‘#son’,
   // props: [‘aa’],
   props: {
   // 属性： 属性的数据类型 给数据做属性验证，验证数据类型
   ‘aa’: Number
   }
   })

3. 这个属性的用法和data中属性相同

4. 特点：父组件中修改这个值，子组件中也同样改变，子组件中修改父组件中不会改变（符合组件通信的单向原则）

子父组件通信

父组件传一个对象给子组件，子组件进行修改

1.写法与用法与父子组件通信传一个普通数据类型一样，
2.特点：子组件修改对象的值父组件的值也改变（引用数据类型的堆栈特性，违背组件通信的单向原则）

父组件传一个函数给子组件，子组件进行调用

1.写法与用法与父子组件通信传一个普通数据类型一样
2.特点：子组件调用函数，父组件中的函数表达式执行，因为函数在父组件中，所以能间接的修改父组件中的数据，违背组件通信的单向原则）

子组件将一个数据发送给父组件

如何实现：自定义事件
流程：

1. 父组件中定义一个数据，然后在methods定义一个方法用来修改这个数据

Vue.component('Father',{
    template: '#father',
    data () {
        return {
            num: 0
        }
    },
methods: {
    add ( val ) {
        console.log('add')
        this.num += val
        }
    }
})

2. 父组件通过自定义事件的形式，将父组件的一个方法传递给子组件
   <Son @aa = 'add'></Son>
3. 子组件可以通过 this.$emit(自定义事件名称，参数1，参数2...)来订阅这个自定义事件this.$emit(‘aa’,this.money)

非父子组件通信

通过父组件给子组件绑定ref属性形成一个关系链

• 在别的组件中获取另一个组件
  this.$parent.$ref.refName

事件总线

通过新建一个vue实例对象，在之前的vue中使用这个实例的全局属性

var bus = new Vue()

Vue.component('Brother',{
    template: '#brother',
    data () {
        return {
            money: 1000
        }
    },
    methods: {
        give () {
            bus.$emit('aa',this.money)
        }
    }
})

Vue.component('Sister',{
    template: '#sister',
    data () {
        return {
            jk: 0
        }
    },
    mounted () {
        bus.$on('aa',( val ) => {
            this.jk += val
        })
    }
})
new Vue({
    el: '#app',
})