Que signifie vue $on ?-Voir.js-php.cn

Que signifie vue $on ?

藏色散人

Libérer： 2023-01-13 00:44:44

original

5133 Les gens l'ont consulté

"$on" dans vue fait référence à une méthode, avec une syntaxe telle que "Event.$on('msg',function(msg){...}", où le premier paramètre est le nom de les données, correspondant au nom lors de l'envoi, le deuxième paramètre est une méthode, qui doit fonctionner sur les données, version 0, ordinateur Dell G3

Recommandé : "

tutoriel vue Que signifie vue $on ? "<.>

$emit et $on

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

Copier après la connexion

Exemple :

<!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>

Copier après la connexion

Rendu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!