需求：通过 vue 中的 $emit 和 $on 方法进行数据的发送和接收
（1）、有A，B，C三个组件，同时挂载到入口组件中。
（2）、将A组件中的数据传递到C组件，再将B组建中的数据传递到C组件。

1、创建一个 vue 实例，里面包含 vue 的全部方法。

2、创建 A 组件，在 A 组件中通过点击事件，将数据通过 $emit 方法传递出去。

send(){
　　// $emit('A事件数据名称', 数据)
　　Event.$emit('a-msg', this.a);
}

3、创建 B 组件，在 B 组件中通过点击事件，将数据通过 $emit 方法传递出去。

send(){
　　// $emit('B事件数据名称', 数据)
　　// console.log(this);
　　Event.$emit('b-msg', this.b);
}

4、创建 C 组件，在 C 组件中通过生命周期的 mounted 钩子函数渲染数据。

mounted(){
　　// 接收A的数据
　　// $on('A事件数据名称', fn(a))
　　Event.$on('a-msg', (a)=>{
　　　　this.a = a;
　　});
　　// 接收B的数据
　　Event.$on('b-msg', (b)=>{
　　　　this.b = b;
　　});
}

整体代码如下：

    <div id="app">
        <dom-a></dom-a>
        <dom-b></dom-b>
        <dom-c></dom-c>
    </div>
    <!-- 
        $emit和$on进行组件之间的传值
        注意：$emit和$on的事件必须绑定在一个公共的实例上，才能够触发
        需求：
            1、有A，B，C三个组件，同时挂载到入口组件中
            2、将A组件中的数据传递到C组件，再将B组建中的数据传递到C组件
     -->
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        // 创建一个vue实例，里面包含vue的全部方法
        var Event = new Vue();
        var A ={
            data(){
                return{
                    a:'我是A组件的数据'
                }
            },
            template:` 
                <div>
                    <span>我是A组件的数据-> {{a}}</span>
                    <input @click='send' type="button" value="把A数据传给C" />
                </div>
            `,
            methods:{
                send(){
                    // $emit('A事件数据名称', 数据)
                    // console.log(this);
                    Event.$emit('a-msg', this.a);
                }
            }
        };
        var B ={
            data(){
                return{
                    b:'我是B组件的数据'
                }
            },
            template:` 
                <div>
                    <span>我是B组件的数据-> {{b}}</span>
                    <input @click='send' type="button" value="把B数据传给C" />
                </div>
            `,
            methods:{
                send(){
                    // $emit('B事件数据名称', 数据)
                    // console.log(this);
                    Event.$emit('b-msg', this.b);
                }
            }
        };
        var C = {
            template:` 
                <div>
                    <h3>我是C组件</h3>
                    <span>接收A组件的数据-> {{a}}</span>
                    <br/>
                    <span>接收B组件的数据-> {{b}}</span>
                </div>
            `,
            data(){
                return{
                    a:'',
                    b:''
                }
            },
            mounted(){
                // 接收A的数据
                // $on('A事件数据名称', fn(a))
                Event.$on('a-msg', (a)=>{
                    this.a = a;
                });
                // 接收B的数据
                Event.$on('b-msg', (b)=>{
                    this.b = b;
                });
            }
        };
        new Vue({
            el:'#app',
            components:{
                'dom-a': A,
                'dom-b': B,
                'dom-c': C
            }
        });
    </script>

 

原文地址：http://www.cnblogs.com/sfwu/p/16910255.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性