什么你连vue父组件怎么监听子组件的事件都不知道快来vue2和vue3父组件监听子组件事件的区别吧
vue2和vue3中父组件监听子组件事件的区别
一、vue2中父组件监听子组件事件
在Vue 2中,可以使用$emit方法在子组件上触发自定义事件,并使用v-on或@指令在父组件中监听该事件,也就是通过父组件给子组件绑定一个自定义事件实现子给父传递数据。例如:
<!-- 子组件中 -->
<button @click="$emit('child-event', childData)">点击我传递子数据</button>
<!-- 父组件中 -->
<!-- 第一种写法,使用@或v-on -->
<Child @child-event="getChildData"/>
<!-- 或 -->
<Child v-on:child-event="getChildData"/>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
methods: {
getChildData(childData) {
// 处理 child 事件
}
}
}
</script>
<!-- 第二种写法,使用ref -->
<Child ref="child"/>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
methods: {
getChildData(childData) {
// 处理 child-event 事件
}
},
mounted(){
this.$refs.child.$on('child-event',this.getChildData)
}
}
</script>
在这个例子中,当子组件中的按钮被单击时,将触发child-event事件,并且事件数据childData将被传递给父组件中名为getChildData的方法,可以在方法中处理事件的后续操作。
二、vue3中父组件监听子组件事件
在Vue 3中,父组件不能使用 o n 来监听子组件事件。 on来监听子组件事件。 on来监听子组件事件。on是Vue 2中用于在某个实例上监听自定义事件的方法,而在Vue 3中,这个方法已被移除。所以,在Vue 3中,您可以使用$emit方法在子组件上触发自定义事件,并使用@或v-on指令在父组件中监听该事件,也就是通过父组件给子组件绑定一个自定义事件实现子给父传递数据。例如:
<!-- 子组件中 -->
<button @click="$emit('child-event', childData)">点击我传递子数据</button>
<!-- 父组件中 -->
<!-- 使用@或v-on -->
<Child @child-event="getChildData"/>
<!-- 或 -->
<Child v-on:child-event="getChildData"/>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
methods: {
getChildData(childData) {
// 处理 child-event 事件
}
}
}
</script>
在这个例子中,当子组件中的按钮被单击时,将触发child-event事件,并且事件数据childData将被传递给父组件中名为getChildData的方法,可以在方法中处理事件的后续操作。
在Vue 3中,可以使用与Vue 2类似的方式来触发和监听自定义事件。但是,在Vue 3中还引入了一个新特性,即将事件处理函数添加到emits选项中。这样做可以在开发阶段提供类型检查和错误提示。
例如:
<!-- 子组件中 -->
<button @click="$emit('child-event', childData)">点击我传递子数据</button>
<!-- 父组件中 -->
<!-- 使用@或v-on -->
<Child @child-event="getChildData"/>
<!-- 或 -->
<Child v-on:child-event="getChildData"/>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
methods: {
getChildData(childData) {
// 处理 child-event 事件
}
},
emits: {
// 将 "child-event" 添加到 emits 选项中
'child-event': (childData) => {
return true; // 表示此事件被允许
}
}
}
</script>
在这个例子中,我们的父组件定义了一个名为getChildData的方法来处理子组件中触发的child-event事件。还使用emits选项将该事件添加到组件的选项列表中。
在emits选项中,我们还可以设置事件处理函数的签名,并以对象形式返回一个布尔值。返回true表示事件被允许,否则会在开发阶段引发警告。
总体来说,Vue 3中的新特性使其更易于管理和维护大型代码库,同时还提供了类型检查和错误提示,可以帮助我们更早地捕获和纠正代码错误。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggbkea
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01