vue $on是什么意思-Vue.js-PHP中文网

vue $on是什么意思

藏色散人

发布： 2020-12-03 10:15:19

原创

5698人浏览过

vue中“$on”指的是一个方法，语法如“Event.$on('msg',function(msg){...}”，其中第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作。

vue $on是什么意思

本教程操作环境：Windows7系统、vue2.0版，Dell G3电脑。

推荐：《vue教程》

vue中$emit与$on

　　var Event = new Vue();　　　　　　
相当于又new了一个vue实例，Event中含有vue的全部方法；
　　Event.$emit('msg',this.msg);　　　   
发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；
　　Event.$on('msg',function(msg){　　
接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作
　　　　/这里是对数据的操作
　　})

登录后复制

例：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>孙三峰--博客园</title>
        <script type="text/javascript" src="js/vue2.0.3.js" ></script>
        <script type="text/javascript">
            //准备一个空的实例对象
            var Event = new Vue();
            var A={
                template:`
                    <div style="border: 1px solid red; margin-bottom: 10px； width: 300px;">
                        <h4>A组件</h4>
                        <p>{{a}}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10835">
                            <img src="https://img.php.cn/upload/webcode/000/000/010/176395680746132.jpg" alt="NetShopForge网上商店程序(VB)源码">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10835">NetShopForge网上商店程序(VB)源码</a>
                            <p>NetShopForge是一款强劲的B2C的网上购物软件,利用她我们能建立起强劲的、自由的、安全的购物平台。 维博软件以有这样的软件无比自豪，系统基于ASP.NET 2.0及SqlServer开发，充分享受新技术带来的乐趣。 软件综合了卖家，买家，程序员，设计者的头脑风暴，目的就是用户能建立风格不同的电子商务系统，使它显得更加与众不同。 如果您寻求一款能按您的思想随意发挥的网上购物软件,那么Net</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="NetShopForge网上商店程序(VB)源码">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10835" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="NetShopForge网上商店程序(VB)源码">
                        </a>
                    </div>
                
                        <input type="button" value="把A数据给C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        a:'我是A里面的数据'
                    }
                },
                methods:{
                    send(){        //A发送数据
                        Event.$emit('a-msg',this.a);
                    }
                }
            };
            var B={
                template:`
                    <div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
                        <h4>B组件</h4>
                        <p>{{b}}</p>
                        <input type="button" value="把B数据给C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        b:'我是B里面的数据'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('b-msg',this.b);
                    }
                }
            };
            var C={
                template:`
                    <div style="border: 1px dotted green; margin-bottom: 10px；width: 300px;">
                        <h4>我是C组件,我在坐等接收数据</h4>
                        <p>{{a}}</p>
                        <p>{{b}}</p>
                    </div>
                `,
                data(){
                    return{
                        a:'',
                        b:''
                    }
                },
                mounted(){        //两种接收的方式
                    var _this = this;
                    Event.$on('a-msg',function(a){
                        _this.a=a;
                    });
                    Event.$on('b-msg',function(b){
                        this.b = b;
                    }.bind(this))
                }
            };
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{

                    },
                    components:{
                        'com-a':A,
                        'com-b':B,
                        'com-c':C
                    }
                })
            }
        </script>
    </head>
    <body>
        <div id="box">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>
        </div>
    </body>
</html>

登录后复制

效果图：