当前位置：首页 > 前端技术 > vue >内容正文

vue

Vue自定义事件

发布时间：2023/12/20 vue 34 豆豆

生活随笔收集整理的这篇文章主要介绍了 Vue自定义事件小编觉得挺不错的,现在分享给大家,帮大家做个参考.

父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。

1、自定义事件

每个Vue创建的实例都会出现一个事件接口

var vm = new Vue({el: '#app'})

自定义事件的定义(发布)

//vm.$on(自定义事件的名称，自定义事件的事件处理程序)vm.$on( 'aa', function () {console.log( 'aa' )})

//自定义事件的触发（订阅）

// vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)vm.$emit( 'aa' )

2、自定义事件的数据传递

我们通过下面代码分析一下自定义事件的数据传递

<body><div id="app"><Father></Father></div><template id="father"><div><h3>这里是父组件</h3><p>儿子给我{{ money}} </p><Son @hongbao="givemoney"></Son></div></template><template id="son"><div><h3>这里是子组件</h3><button @click="give">给父亲红包</button></div></template> </body><script>Vue.component('Father',{template:'#father',data(){return {money:0,}},methods:{//自定义事件的定义(发布)givemoney(val){this.money=val;}}});Vue.component('Son',{template:'#son',data(){return {money:3000,}},methods:{//自定义事件的触发（订阅）give(){console.log(this.money)this.$emit('hongbao',this.money)}}})new Vue({}).$mount('#app')

从上述代码可以看出，父组件通过$on监听事件，事件处理函数的参数则为接收的数据

methods:{//自定义事件的定义(发布)givemoney(val){this.money=val;}}

子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据

methods:{//自定义事件的触发（订阅）give(){console.log(this.money)this.$emit('hongbao',this.money)}}

总结

以上是生活随笔为你收集整理的Vue自定义事件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。