前端流行框架Vue3教程:15. 组件事件

组件事件
在组件的模板表达式中，可以直接使用$emit方法触发自定义事件
触发自定义事件的目的是组件之间传递数据

我们来创建2个组件。父组件： ComponentEvent.vue,子组件：Child.vue

Child.vue

<script>
export default {
  // 子组件通过$emit触发父组件的自定义事件并传递数据
  // someEvent为自定义事件名，"来自Child的数据"为传递的数据
  methods: {
    clickEventHandle() {
      this.$emit("someEvent", "来自Child的数据")
    }
  }
}
</script>

<template>
  <h3>Child</h3>
  <!-- 点击按钮触发clickEventHandle方法，通过$emit传递数据给父组件 -->
  <button @click="clickEventHandle">传递数据</button>
</template>

ComponentEvent.vue

<script>
import Child from "./Child.vue"

export default {
  data() {
    return {
      // 用于存储子组件传递的数据
      message: ""
    }
  },
  components: {
    Child
  },
  methods: {
    // 接收子组件传递的数据
    // data为接收到的数据
    getHandle(data) {
      this.message=data;
    }
  }
}
</script>

<template>
  <h3>组件事件</h3>
  <!-- 子组件监听someEvent事件，绑定getHandle方法处理数据 -->
  <Child @someEvent="getHandle"/>
  <!-- 显示接收到的数据 -->
  <p>父元素：{{message}}</p>
</template>

温馨提示
组件之间传递数据的方案：
父传子：props
子传父：自定义事件(this.$emit)