Home > Article > Web Front-end > What does vue $on mean?

What does vue $on mean?

藏色散人Original: 2020-12-03 10:15:195063browse

"$on" in vue refers to a method, with syntax such as "Event.$on('msg',function(msg){...}", where the first parameter is the name of the data , corresponding to the name when sending, the second parameter is a method to operate on the data.

The operating environment of this tutorial: Windows7 system, vue2. Version 0, Dell G3 computer.

Recommendation: "vue tutorial"

$emit and $on

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

Example:

<!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>
                        <input type="button" value="把A数据给C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        a:&#39;我是A里面的数据&#39;
                    }
                },
                methods:{
                    send(){        //A发送数据
                        Event.$emit(&#39;a-msg&#39;,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:&#39;我是B里面的数据&#39;
                    }
                },
                methods:{
                    send(){
                        Event.$emit(&#39;b-msg&#39;,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:&#39;&#39;,
                        b:&#39;&#39;
                    }
                },
                mounted(){        //两种接收的方式
                    var _this = this;
                    Event.$on(&#39;a-msg&#39;,function(a){
                        _this.a=a;
                    });
                    Event.$on(&#39;b-msg&#39;,function(b){
                        this.b = b;
                    }.bind(this))
                }
            };
            window.onload=function(){
                new Vue({
                    el:&#39;#box&#39;,
                    data:{

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

Rendering:

What does vue $on mean?

The above is the detailed content of What does vue $on mean?. For more information, please follow other related articles on the PHP Chinese website!

Event function

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What should I do if the Vue interface does not display when refreshed?Next article：What should I do if the Vue interface does not display when refreshed?

See more

What does vue $on mean?

Related articles