组件通信-自定义事件
自定义事件：常用于 子>父
-
注意区分好：原生事件、自定义事件。
-
原生事件：
-
事件名是特定的（
click、mosueenter等等） -
事件对象
$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
-
-
自定义事件：
-
事件名是任意名称 （建议肉串命名 ：send-toy）
-
事件对象
$event: 是调用emit时所提供的数据，可以是任意类型！！！
-
父组件
<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child.vue'
const toy = ref('')
const getToy = (value: string) => {console.log('toy', value)toy.value = value
}</script><template><div class="father"><h1>父组件</h1><h3 v-if="toy">子给的玩具 {{ toy }}</h3><!-- 给子组件添加时间 注意getToy函数不用加() --><Child @send-toy="getToy" /></div></template>子组件
<script setup lang="ts">
import { ref } from 'vue'
const toy = ref('奥特曼')
// 声明事件
const emit = defineEmits(['send-toy'])
</script><template><div class="child"><h1>子组件</h1><h3>子的玩具：{{ toy }}</h3><button @click="emit('send-toy', toy)">测试</button></div></template>