卓越飞翔博客卓越飞翔博客

卓越飞翔 - 您值得收藏的技术分享站
技术文章55158本站已运行402

vue中$emit的用法

$emit 是 vue.js 中用于触发父组件事件的方法,用法为 $emit(eventname, ...payload),eventname 为事件名称,payload 为可选的参数。步骤如下:子组件中使用 $emit 触发事件。父组件中使用 v-on 指令监听子组件发出的事件,并执行相应的事件处理函数。

vue中$emit的用法

Vue 中 $emit 的用法

什么是 $emit?

$emit 是 Vue.js 中用于触发父组件事件的方法。

用法:

$emit(eventName, ...payload)

  • eventName: 要触发的事件名称
  • payload: 传递给事件处理函数的任何可选参数

详细说明:

$emit 允许子组件向父组件发送事件,使父组件能够对子组件的动作做出响应。

步骤:

  1. 在子组件中,使用 $emit 触发一个事件。
  2. 在父组件中,使用 v-on 指令监听子组件发出的事件,并执行相应的事件处理函数。

示例:

子组件:

<template><button>Click me</button>
</template><script>
export default {
  methods: {
    // 触发 myEvent 事件
    emitEvent() {
      this.$emit('myEvent');
    }
  }
}
</script>

父组件:

<template><child-component></child-component></template><script>
import ChildComponent from './ChildComponent.<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15721.html" target="_blank">vue'

export default {
  components: { ChildComponent },
  methods: {
    // 响应 myEvent 事件
    handleEvent() {
      console.log('Event received!');
    }
  }
}
</script>

在上面示例中:

  • 子组件触发 myEvent 事件。
  • 父组件通过 v-on 监听该事件并执行 handleEvent 函数。
卓越飞翔博客
上一篇: vue中emit怎么传两个参数
下一篇: 返回列表
留言与评论(共有 0 条评论)
   
验证码:
隐藏边栏