美文网首页
vue组件之间的通信

vue组件之间的通信

作者: 人言可畏_0292 | 来源:发表于2018-04-03 20:20 被阅读0次

    组件通讯

    父传子

    通过在标签绑定数据

    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组件之间的通信

          本文链接:https://www.haomeiwen.com/subject/flgchftx.html