时间：2023-03-15 09:24:31 | 栏目：vue | 点击：次
注：本文是基于vue3.0的语法
<template>
//我派发出了事件，这个事件的命名为myclick，连接至父组件
<button @click="emit('myclick')">Emit</button>
//我啥都没派发
<button>noneEmit</button>
</template>
<script setup>
import { defineEmit } from 'vue'
// 定义派发事件
const emit = defineEmit(['myclick'])
</script>
<template> //子组件使用通信的 @myclick事件 → 使用父组件函数 <HelloWorld @myclick="onmyclick"/> </template>
<script setup>
//导入子组件
import HelloWorld from './components/HelloWorld.vue';
//子组件使用使用父组件函数
const onmyclick = () => {
console.log(" Come from HelloWorld! ");
}
</script>
先获取上下文对象，通过该对象的emit()方法进行事件的传出，其他同上
<template> <button @click="emitclick">emitclick</button> </template>
<script setup>
import { useContext } from 'vue'
// 获取上下文
const ctx = useContext();
const emitclick = () => {
ctx.emit('myclick');
}
</script>
<template> //子组件使用通信的 @myclick事件 → 使用父组件函数 <HelloWorld @myclick="onmyclick"/> </template>
<script setup>
import HelloWorld from './components/HelloWorld.vue';
const onmyclick = () => {
console.log(" Come from HelloWorld! ");
}
</script>