vue3 怎么在父组件修改子组件的值

使用<script setup>的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在<script setup> 中声明的绑定。

换句话说：父组件通过 ref 的方式，是不能直接访问到子组件数据的。需要子组件通过 defineExpose 暴露出来才可以。

<!--父组件-->
<template>
  <Children ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Children from './child.vue'

const child = ref(null)
const parentData = {
  name: '下雪天的夏风',
  want: '求关注'
}

onMounted(() => {
  // 修改子组件数据
  child.value.setFirstData(parentData)

  // 获取子组件数据
  const { getFirstData, secondData } = child.value
})
</script>

<!--子组件-->
<template>
  <div></div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'

const firstData = ref(null)
const secondData = ref('second')

defineExpose({
  setFirstData(res){
    firstData.value = res
  },
  getFirstData(){
    return firstData.value
  },
  secondData
})
</script>