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

原创已于 2023-07-08 00:03:55 修改 · 9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue

于 2023-03-15 00:15:16 首次发布

vue3 专栏收录该内容

18 篇文章

订阅专栏

在Vue3中，使用<scriptsetup>的组件默认不会暴露内部数据。父组件不能直接通过ref访问子组件的数据，必须由子组件通过defineExpose显式暴露。例如，子组件定义了firstData和secondData，然后通过defineExpose暴露setFirstData和getFirstData方法，允许父组件修改和获取这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要用到defineExpose

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>