从子组件中派发自定义事件

2023-12-29 03:07:11

在Vue.js中，子组件和父组件之间的通信是通过事件派发和监听来实现的。子组件可以使用$emit方法派发自定义事件，而父组件可以使用@事件名语法来监听这些事件。这样，当子组件派发事件时，父组件就会做出相应的响应。

派发自定义事件

要在子组件中派发自定义事件，可以使用$emit方法。该方法有两个参数：事件名和事件参数。事件名是一个字符串，用来标识事件的类型。事件参数是一个对象，包含要传递给父组件的数据。

<template>
  <button @click="$emit('my-event', { message: 'Hello from child!' })">
    Send Event
  </button>
</template>

<script>
export default {
  methods: {
    emitMyEvent() {
      this.$emit('my-event', { message: 'Hello from child!' })
    }
  }
}
</script>

在上面的例子中，当用户点击按钮时，子组件会派发一个名为"my-event"的事件，并传递一个包含"message"属性的对象作为事件参数。

监听自定义事件

要在父组件中监听自定义事件，可以使用@事件名语法。该语法将事件名放在组件模板中的元素上，当该元素发生事件时，就会触发相应的事件处理函数。

<template>
  <div>
    <child-component @my-event="handleMyEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleMyEvent(event) {
      console.log(event.message) // Hello from child!
    }
  }
}
</script>

在上面的例子中，父组件监听了子组件派发的"my-event"事件，并在事件处理函数中接收到了事件参数。

处理事件参数

在事件处理函数中，可以访问事件参数。事件参数是一个对象，包含了派发事件时传递的数据。

<template>
  <div>
    <child-component @my-event="handleMyEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleMyEvent(event) {
      console.log(event.message) // Hello from child!
    }
  }
}
</script>