美文网首页
vue2.0 同级组件之间的通信

vue2.0 同级组件之间的通信

作者: 素时年锦 | 来源:发表于2017-11-02 23:00 被阅读0次
 <div id="box">
        <div>
            <demo-a></demo-a>
            <demo-b></demo-b>
            <demo-c></demo-c>
        </div>
    </div>

下面做的小demo是点击组件<demo-a></demo-a>的时候 将A组件里面的数据{a:'我是A组件'} 传给C组件,如下:

 var vm = new Vue();
        var A = {
            data() {
                return {
                    a: '我是A组件'
                }
            },
            template: `
            <div>
             <span>{{a}}</span>
            <input type="button" value="把A组件传给C" @click='send'>
             </div>
            `,
            methods: {
                send() {
                    vm.$emit('aaa', this.a)
                }
            }
        };
        var B = {
            template: `
            <div>
            <span>我是A组件</span> 
            <input type="button" value="把B组件传给C">
            </div>
            `
        }
        var C = {
            template: `
            <div>
            <span>我是C组件==></span> 
            <span>{{a}}</span>
            </div>
            `,
            data() {
                return {
                    a: ''
                }
            },
            mounted() {
                var _this = this
                vm.$on('aaa', function (data) {
                    alert(data)
                    _this.a = data

                })
            }
        }
        new Vue({
            el: '#box',
            data: {
            },
            components: {
                'demo-a': A,
                'demo-b': B,
                'demo-c': C
            }
        })

相关文章

  • vue2.0 同级组件之间的通信

    下面做的小demo是点击组件的时候 将A组件里面的数据{a:'我是A组件'} 传...

  • Vue.js--组件通信

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

  • 对于vue2.0同级组件间的通信介绍

    对于较复杂项目建议使用vuex,对于简单不需太多通信的项目可以使用如下方法或者通过缓存传值。 假使a.vue和b....

  • Vue 父子组件通信

    子组件与父组件通信 1、通过$emit实现通信 vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据,...

  • Vue组件间的通信

    1.父组件到子组件通信 通过props属性来传递 2.子组件到父组件通信 通过Vue.$emit()方法 3.同级...

  • React的组件通信

    组件之间进行通信的情况: 父组件向子组件通信 子组件向父组件通信 兄弟组件之间通信 发布者-订阅者模式 一、父组件...

  • 组件通信注解框架实践

    组件通信注解框架实践 目录介绍 01.为何需要组件间通信 02.实现同级组件通信方式 03.先看一个简单的案例 0...

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

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

  • [Vue]组件之间如何通信?

    组件通信可以大致分为两种情况,父子组件之间的通信和非父子组件之间的通信,下面来分别介绍 一、父子组件之间的通信 1...

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

网友评论

      本文标题:vue2.0 同级组件之间的通信

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