vue3 父组件修改子组件的值

在Vue3中，父组件修改子组件的值可以通过使用ref和defineExpose来实现。首先，在父组件中，我们需要在子组件上添加ref属性，并在父组件中引入子组件文件。然后，在父组件的onMounted钩子函数中，我们可以通过ref访问子组件的实例，并使用子组件的方法来修改子组件的数据。示例代码如下所示：

<!-- 父组件 -->
<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>

在上述示例中，父组件通过ref属性引用子组件，并在onMounted钩子函数中通过ref访问子组件的实例。通过调用子组件的setFirstData方法，父组件可以修改子组件的数据。同时，父组件也可以通过child.value获取子组件暴露出来的方法和数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3 怎么在父组件修改子组件的值](https://blog.csdn.net/qq_40147756/article/details/129542858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue中父组件如何动态修改子组件的值？](https://blog.csdn.net/m0_57146100/article/details/119617880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]