组件通信-自定义事件

自定义事件：常用于 子>父

1. 注意区分好：原生事件、自定义事件。

• 原生事件：

  • 事件名是特定的（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>