詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、<script?setup>?中使用)
在 vue2
中 ref
被用來獲取對(duì)應(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 () { // 定義一個(gè)對(duì)象關(guān)聯(lián)上子組件的 ref 值(注意:這里的屬性名必須跟子組件定義的 ref 值一模一樣,否者會(huì)關(guān)聯(lián)失效) const RefTestComponent = ref(null) // 延遲使用,因?yàn)檫€沒有返回跟掛載 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' // 定義一個(gè)對(duì)象關(guān)聯(lián)上子組件的 ref 值(注意:這里的屬性名必須跟子組件定義的 ref 值一模一樣,否者會(huì)關(guān)聯(lián)失效) const RefTestComponent = ref(null) // 延遲使用,因?yàn)檫€沒掛載 nextTick(() => { RefTestComponent.value.show() }) </script>
到此這篇關(guān)于Vue3 父組件調(diào)用子組件方法($refs 在setup()、<script setup> 中使用)的文章就介紹到這了,更多相關(guān)Vue3 父組件調(diào)用子組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vuejs使用axios異步訪問時(shí)用get和post的實(shí)例講解
今天小編就為大家分享一篇vuejs使用axios異步訪問時(shí)用get和post的實(shí)例講解,具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08el-table表格渲染動(dòng)態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案
這篇文章主要介紹了el-table表格渲染動(dòng)態(tài)表頭,數(shù)據(jù)更新視圖不變化的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06vue中解決拖拽改變存在iframe的div大小時(shí)卡頓問題
這篇文章主要介紹了vue中解決拖拽改變存在iframe的div大小時(shí)卡頓問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue element-ul實(shí)現(xiàn)展開和收起功能的實(shí)例代碼
這篇文章主要介紹了vue element-ul實(shí)現(xiàn)展開和收起功能的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11vue3使用vuedraggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue3使用vuedraggable實(shí)現(xiàn)拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐記錄
無論單頁還是多頁,我的實(shí)現(xiàn)思路是總體配置404頁面的思路就是在前端路由表中添加一個(gè) path: '/404' 的路由,渲染相應(yīng)的404頁面。這篇文章主要介紹了Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐,需要的朋友可以參考下2018-05-05