vue3 子向父传值

在Vue3中，子组件向父组件传递值的方式与Vue2.x有所不同。Vue2.x使用的是$emit，而Vue3使用的是emit。具体实现方式如下所示：

1. 子组件的传递方式：

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

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

// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(['clickChild'])

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

<style>
</style>

2. 父组件接收与使用：

<template>
  <div class="hello">
    我是父组件
    <!-- clickChild是子组件绑定的事件，click是父组件接受方式 -->
    <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>

3. 效果图：