vue3 setup子传父

在Vue 3中，使用setup语法糖进行子向父组件传值有一些区别。首先，在子组件中，我们可以使用defineEmits函数创建一个名称，接受一个数组来定义需要传递给父组件的事件。然后，我们可以通过emit函数来触发这些事件并传递参数。例如，我们可以在子组件中使用如下代码来传递值给父组件：

<template>
  <button @click="clickChild">点击子组件</button>
</template>

<script setup>
import { defineEmits } from 'vue'

const emit = defineEmits(['clickChild'])

const clickChild = () => {
  let param = { content: 'b' } // 传递给父组件的参数
  emit('clickChild', param)
}
</script>

<style>
</style>

接着，在父组件中，我们可以通过在子组件上使用@clickChild来绑定事件并在父组件中定义相应的处理函数来接收传递的值。例如：

<template>
  <div class="hello">
    我是父组件
    <Child @clickChild="clickEven"></Child>
    <p>子组件传递的值是 {{ result }}</p>
  </div>
</template>

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

const result = ref('')

const clickEven = (val) => {
  console.log(val)
  result.value = val.content
}
</script>

<style scoped>
</style>

通过以上代码，我们可以实现Vue 3中子向父组件传递值的效果。 <span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>