美文网首页
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组件之间通信

    vue 组件之间通信 vue组件之间通信方式: 1.父组件通过props向下传数据给子组件,子组件通过$emit事...

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

  • Vue.js--组件通信

    vue组件之间的通信包括三种: 1.父组件向子组件通信 2.子组件向父组件通信 3.同级组件之间的通信 首先,看一...

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • Vue 组件 / 通信

    子组件=》父组件 vue的组件之间的通信类似angular的父子层级之间通信,父组件获取子组件数据步骤大概如下: ...

  • 【Vue2】组件传值的六种方法

    Vue 组件之间的通信大概归类为: 父子组件通信: props/$emit;ref/refs;$attrs / $...

  • Vue组件通信

    Vue 组件之间的通信,通常我们遇到的都是父子组件之间的通信 一、父子组件传参 子组件定义 Props 属性; 父...

  • Vue.js基础(二)

    1. 组件之间的通信 向子组件中传递 number=99 子组件a.vue中 执行效果 2. 组件之间的通信 - ...

  • Vue组件通信

    Vue组件通信 Vue组件关系可分为三大类: 父子组件 兄弟组件 跨级组件, 相应的组件之间的通信也分类三大类: ...

  • Vue组件通信

    总体来说,Vue中组件之间的通信场景如下图: 可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。 1. 自定义...

网友评论

      本文标题:vue组件之间的通信

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