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 = '我是改变后的'

        })

    }

});

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容