vue3子传父

子组件

<template>
  <div>
    <button @click="btn">传参</button>
  </div>
</template>

<script setup>
import {ref} from 'vue';
const son = ref('son');
const age = ref(18);
const number = ref(99);
//定义了一个名为 emits 的对象，它使用了 defineEmits 函数，并传入了一个字符串数组，用于定义组件可以发射的事件名。
const emits = defineEmits(['handle']);
const btn = () => {
  // 调用了 emits 函数，并传入了 'handle' 和 son 两个参数，这表示组件会发射名为 'handle' 的事件，并传递一个值为 son 的参数。
  emits('handle', son, age, number);
};
</script>

父组件

<template>
  <div class="about">
    {{ sonData }}
    <Son @handle="handleClick"></Son>
  </div>
</template>

<script setup>
import Son from '@/components/son.vue';
import {ref} from 'vue';
const sonData = ref();
const handleClick = (...son) => {
  sonData.value = son;
};
</script>