首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue3侦听来自动态创建子组件$on替换的事件

Vue3中,侦听来自动态创建子组件$on替换的事件是通过使用emits选项来实现的。

在Vue3中,动态创建的子组件不再支持使用$on$emit来进行事件的侦听和触发。相反,Vue3引入了emits选项,用于声明组件可以触发的事件。

emits选项是一个对象,其中的属性表示组件可以触发的事件名称,属性的值可以是一个字符串或一个函数。如果属性的值是一个字符串,表示该事件没有参数;如果属性的值是一个函数,表示该事件可以传递参数。

下面是一个示例:

代码语言:txt
复制
// 子组件 Child.vue
<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
export default {
  emits: ['my-event'], // 声明可以触发的事件
  methods: {
    handleClick() {
      this.$emit('my-event', 'Hello from Child') // 触发事件,并传递参数
    }
  }
}
</script>

在父组件中,可以使用v-on指令来侦听子组件触发的事件:

代码语言:txt
复制
// 父组件 Parent.vue
<template>
  <div>
    <child @my-event="handleEvent"></child>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(message) {
      console.log(message) // 输出:Hello from Child
    }
  }
}
</script>

在上面的示例中,子组件Child通过emits选项声明了一个名为my-event的事件,并在点击按钮时触发该事件,并传递了一个参数。父组件Parent通过v-on指令侦听子组件触发的my-event事件,并在事件处理函数中接收到子组件传递的参数。

推荐的腾讯云相关产品和产品介绍链接地址:

以上是关于Vue3侦听来自动态创建子组件$on替换的事件的完善且全面的答案,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券