vue event 自定义事件

最新推荐文章于 2024-08-16 07:34:20 发布

v折耳

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量2.5w

点赞数 2

分类专栏： vue 文章标签： vue component event 自定义事件

本文链接：https://blog.csdn.net/wngzhem/article/details/53409561

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

子组件要把数据传递给父级依靠自定义事件

自定义事件

监听$on(eventName)

触发$emit(eventName)

基本使用方法如下

使用app.$on('text',function(){})来自定义一个事件，实例中我使用click点击事件来触发addn 中的 app.$emit('text')给事件传递参数'hi';

app.$on监听到text 执行打印 value

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
        </div>
    </body>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(){
                     this.pn+=1;
                      this.$emit('text','hi');
                    }

            }
        });
        app.$on('text',function(value){
                        console.log(value);
                    })

    </script>

给予这个机制父级组件就可以将父级组件的信息传递给自己组件

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
            <zhe></zhe>
        </div>
    </body>
    <script>
    Vue.component('zhe',{
            template:'<div v-on:click="myevent">{{mes}}</div>',
            data:function(){
                return {mes:1}
            },
            methods:{
                myevent:function(){
                    this.mes+=1;
                    app.$emit('example','zhe')
                }
            }
        });
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(){
                     this.pn+=1;
                      this.$emit('example','hi');
                    }
            }
        });
        app.$on('example',function(value){
                        console.log(value);
                    })

    </script>

上图为先点击<zhe></zhe>,在点击<div @click="addn">{{pn}}</div>执行结果

这就实现了父级组件监听子级事件，通过事件可以将父级的数据传递给子集

以$on(eventName)和$emit(eventName)配合使用时，须注意的是vue的事件运行类似浏览器的事件运行机制

所有从可以使用浏览器的类似事件机制

<body>
        <div id="app">
            <div @click="addn">{{pn}}</div>
            <zhe @myevent="addn(111)"></zhe>
            <zhe></zhe>
        </div>
    </body>
    <script>
    Vue.component('zhe',{
            template:'<div v-on:click="myevent">{{mes}}</div>',
            data:function(){
                return {mes:1}
            },
            methods:{
                myevent:function(){
                    this.mes+=1;
                    this.$emit('myevent')
                }
            }
        });
        var app=new Vue({
            el:"#app",
            data:{
                pn:10
            },
            methods:{
                addn:function(value){
                     this.pn+=1;
                     console.log(value);
                      this.$emit('example','hi');
                    }
            }
        });
        app.$on('example',function(value){
                        console.log(value);
                    })

    </script>

通过将子级组件的触发函数绑定到父级的事件上

<zhe @myevent="addn(111)"></zhe> 可以理解为触发父级组件事件的时候绑定了子集的方法函数addn()

换成你熟悉的事件就是<div v-on:click="addn(111)"></div> ;

但是触发myevent 是<div v-on:click="myevent">{{mes}}</div>的click myevent方法中触发