快捷導(dǎo)航

vue3 ref獲取不到子組件的解決方法

更新時(shí)間：2024年06月18日 11:01:27 作者：麻辣翅尖

在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下

需求

在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài)，父子組件使用<script setup>語法糖，父組件通過給子組件定義ref訪問其內(nèi)部事件。這看起來完全沒毛病，理想很豐滿，現(xiàn)實(shí)很骨感，寫完就是訪問不到，還報(bào)錯(cuò)，離離原上譜，這究竟是為啥

在這里插入圖片描述

經(jīng)過一番調(diào)查，我才明白setup語法糖需要用defineExpose把要讀取的屬性和方法單獨(dú)暴露出去，這就不得不反思一下自己當(dāng)初是怎么學(xué)習(xí)的使用setup語法糖，回想好像只是在查閱資料時(shí)看到有人貼了一段代碼是這樣方式就直接照貓畫虎的直接使用，根本沒有去查閱官方文檔去細(xì)致全面的學(xué)習(xí)，呼倫吞棗是真的會(huì)挖很多坑等待自己探索

下面我做了一個(gè)測(cè)試，我創(chuàng)建兩個(gè)子組件，一個(gè)使用setup語法糖，另一個(gè)使用setup()函數(shù)，都在父組件通過ref去訪問，打印看結(jié)果

父組件：HomeView.vue

<template>
  <div class="home">
    <myChild ref="child" />
    <myChild2 ref="child2" />
    <button @click="add">點(diǎn)擊</button>
  </div>
</template>

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

const child = ref(null)
const child2 = ref(null)
const add = () => {
  console.log('child=>', child.value, '========', 'child2=>', child2.value)
  // child.value.insert()
  // child2.value.insert()
}

</script>

子組件1：myChild.vue

<template>
  <div class="about">
    <h1 @click="insert">myChild:{{ num }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const num = ref(0)

const insert = () => {
  num.value++
}

</script>

子組件2：myChild2.vue

<template>
  <div class="about">
    <h1 @click="insert">myChild2:{{ num }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const num = ref(0)
    const insert = () => {
      num.value++
    }
    return {
      num,
      insert
    }
  }
}

</script>

結(jié)果

從下圖結(jié)果可以看出，可以通過ref訪問myChild2組件，但是無法訪問myChild組件，

在這里插入圖片描述

原因

vue3項(xiàng)目使用<script setup>語法糖相比于使用setup()函數(shù)會(huì)更加方便簡潔，但前者會(huì)將組件私有化，也就是說使用<script setup>的組件中的數(shù)據(jù)和事件無法被外部訪問，此時(shí)父組件就無法通過ref去訪問該子組件。

除非主動(dòng)對(duì)外暴露 setup 中的數(shù)據(jù)和方法，使用 defineExpose API，此時(shí)你可以向外暴露任何你允許外部訪問的

<!-- myChild -->

<script setup>
import { ref, defineExpose } from 'vue'
const num = ref(0)
const insert = () => {
  num.value++
}
// 向外暴露 insert 事件
defineExpose({ insert, a: 1, b: 2 })

</script>

在這里插入圖片描述