vue event 自定义事件

news/2024/7/9 23:57:18 标签: vue

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

自定义事件

监听$on(eventName)

触发$emit(eventName)

基本使用方法如下

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

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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>

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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>执行结果

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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>

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

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

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

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

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

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