詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、＜script?setup＞?中使用)
更新時間：2022年08月01日 11:02:38 作者：卡爾特斯
這篇文章主要介紹了Vue3?父組件調(diào)用子組件方法（$refs?在setup()、＜script?setup＞?中使用）,在 vue2 中 ref 被用來獲取對應(yīng)的子元素，然后調(diào)用子元素內(nèi)部的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
在 vue2 中 ref 被用來獲取對應(yīng)的子元素，然后調(diào)用子元素內(nèi)部的方法。
<template>
<!-- 子組件 -->
<TestComponent ref="TestComponent"></TestComponent>
</template>
<script>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
export default {
components: {
TestComponent
},
mounted () {
// 調(diào)用子組件方法
this.$refs.TestComponent.show()
}
}
</script>
在 Vue3 setup () {} 中使用 ref，如何獲取到子元素，并調(diào)用方法：
<template>
<!-- 子組件 -->
<TestComponent ref="RefTestComponent"></TestComponent>
</template>
<script>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'
export default {
components: {
TestComponent
},
setup () {
// 定義一個對象關(guān)聯(lián)上子組件的 ref 值（注意：這里的屬性名必須跟子組件定義的 ref 值一模一樣，否者會關(guān)聯(lián)失效）
const RefTestComponent = ref(null)
// 延遲使用，因為還沒有返回跟掛載
nextTick(() => {
RefTestComponent.value.show()
})
// 返回
return {
RefTestComponent
}
}
}
</script>在 Vue3 <script setup> 中使用 ref，如何獲取到子元素，并調(diào)用方法
<template>
<!-- 子組件 -->
<TestComponent ref="RefTestComponent"></TestComponent>
</template>
<script setup>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'
// 定義一個對象關(guān)聯(lián)上子組件的 ref 值（注意：這里的屬性名必須跟子組件定義的 ref 值一模一樣，否者會關(guān)聯(lián)失效）
const RefTestComponent = ref(null)
// 延遲使用，因為還沒掛載
nextTick(() => {
RefTestComponent.value.show()
})
</script>
到此這篇關(guān)于Vue3 父組件調(diào)用子組件方法（$refs 在setup()、＜script setup＞ 中使用）的文章就介紹到這了,更多相關(guān)Vue3 父組件調(diào)用子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue中用canvas實現(xiàn)二維碼和圖片合成海報的方法
這篇文章主要介紹了在Vue中用canvas實現(xiàn)二維碼和圖片合成海報的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue使用Vue.extend創(chuàng)建全局toast組件實例
這篇文章主要介紹了vue使用Vue.extend創(chuàng)建全局toast組件實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了axios攔截器工作原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue組件實現(xiàn)彈出框點擊顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
碰到一個問題,選擇框的數(shù)據(jù)是后端傳過來的,下拉框的數(shù)據(jù)也是后端傳過來的,但是打開下拉框時,發(fā)現(xiàn)數(shù)據(jù)沒有高亮,最后通過只要選擇框v-model給的值和option的value綁定的值一致,就可以高亮,感興趣的朋友一起看看吧2023-12-12
Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例
這篇文章主要介紹了Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
淺析Vue3中通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中如何實現(xiàn)pdf文件預(yù)覽的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue導(dǎo)出excel多層表頭的實現(xiàn)方案詳解
這篇文章主要為大家詳細(xì)介紹了vue導(dǎo)出excel多層表頭的實現(xiàn)方案,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04