Vue 3.x中emits的基本用法示例

分类:知识百科 日期: 点击:0

Vue 3.x中的emits可以让父组件和子组件进行双向通信,父组件可以通过props向子组件传递数据,子组件可以通过emits向父组件发送数据。下面就以一个示例来说明emits的使用方法。

// 父组件




// 子组件



在上面的示例中,父组件中通过@emitData="getData"来监听子组件发出的emitData事件,并将getData方法作为事件处理函数,而子组件中通过this.$emit('emitData', '这是子组件发出的数据')来发出emitData事件,并在事件参数中传递一个字符串。当点击子组件中的按钮时,就会触发子组件发出的emitData事件,从而调用父组件中的getData方法,并将子组件传递的参数打印出来。

通过上面的示例可以看出,Vue 3.x中的emits可以让父组件和子组件进行双向通信,而且使用起来也很简单,只需要在父组件中监听子组件发出的事件,在子组件中发出相应的事件即可。

标签:

版权声明

1. 本站所有素材,仅限学习交流,仅展示部分内容,如需查看完整内容,请下载原文件。
2. 会员在本站下载的所有素材,只拥有使用权,著作权归原作者所有。
3. 所有素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 如果素材损害你的权益请联系客服QQ:77594475 处理。