Vue3| 组合式 API 下的 子传父

发布时间 2023-10-14 10:50:55作者: 嘎嘎鸭2

步骤:

1. 子组件内部通过 emit 方法触发事件

① 通过 defineEmits 编译器宏生成 emit 方法

<script  setup>

const  emit = defineEmits ([ 'get-message' ])   // get-message:可以触发的事件

</script>

② 触发自定义事件,并传递参数

<script  setup>

const  emit = defineEmits ([ 'get-message' ])

 

const  ButtonClick = () => {

      emit ( 'get-message' ,  ' 黑马程序员 ')

}

</script>

 

2. 父组件中 给 子组件标签 通过 @ 监听

<template>

<sonComVue  @get-message = "getMessage"> </sonComVue>

</template>

 

<script  setup>

const  getMessage = (newMessage) => {

      // 修改数据就行了

}

</script>