vue组件之间的通信

组件通讯

父传子

通过在标签绑定数据

props:['mag']

子传递父

    //子:定义一个自定义事件

    this.$emit(‘created’,val)

    //caeated 自定义事件的名字 val你要携带的数据

    //父:接收使用自定义事件

   

    methods:{

        changeVal(val){//然后data里面定义

            this.value = val;

        }

  }

总结

父组件向子组件传递数据是通过props

子组件向父组件传递数据是通过事件

中央通讯

定义一个空的vue对象

    const centre = new Vue()

    Vue.component('Aaa',{

    template:'

我是aaaaaaa

',//点击A的时候

    methods:{

        aaa(){

            sub.$emit('is-aaaa');//发送一个is-aaaa函数 然后一直冒泡 直到找到$on

            }

        }

    });

Vue.component('Bbb',{

    props:['mag'],

    template:`

{{mag}}

`,

    created() {

        sub.$on('is-aaaa',()=> {//接收 然后执行 什么

            this.mag = '我是改变后的'

        })

    }

});

你可能感兴趣的:(vue组件之间的通信)