当前位置：首页 > news >正文

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

news 来源：原创 2025/5/14 16:03:53

组件事件
在组件的模板表达式中，可以直接使用$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>

在这里插入图片描述