黑豹程序员-封装组件-Vue3 setup方式子组件传值给父组件

需求

封装组件

需要使用到Vue3中如何定义父子组件，由子组件给父组件传值

核心代码

如何使用emits

组件

<template>
  <button @click="sendData">点击按钮</button>
</template>


<script setup>
import {ref, defineEmits} from 'vue'
const emits = defineEmits(['childEvent'])

//传递给父组件的数据
const data = ref('hello')

const sendData = () => {
  emits('childEvent', data.value )       //触发emits事件
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

调用

<!-- 父组件 ParentComponent.vue -->
<template>
  <div>
    <!-- 注册子组件的自定义事件，并指定事件处理函数 handleChildEvent -->
    <ChildComponent @childEvent="handleChildEvent"></ChildComponent>
  </div>
</template>

<script setup>
  import {ref } from 'vue'
  import ChildComponent from './c.vue'

  const receivedData = ref()

  //data 为子组件调用后返回的数据
  const handleChildEvent = (data)=>{
    receivedData.value = data;
    console.log(data)
  }

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22