快捷導(dǎo)航

vue3通過(guò)ref獲取子組件defineExpose的數(shù)據(jù)和方法

更新時(shí)間：2023年10月09日 09:29:34 作者：qq_42750608

defineExpose是Vue3中新增的選項(xiàng),用于向父組件暴露子組件內(nèi)部的屬性和方法,通過(guò)defineExpose,子組件可以主動(dòng)控制哪些屬性和方法可以被父組件訪問,本文主要介紹了vue3通過(guò)ref獲取子組件defineExpose的數(shù)據(jù)和方法,需要的朋友可以參考下

1. 父組件:

<script setup>
import { defineAsyncComponent, watchEffect, toRefs, reactive } from 'vue';
// 異步組件
const Test = defineAsyncComponent(()=>import('./xx/Test.vue'))
const child1Ref = ref(null)
const state = reactive({
  age: 1,
  name: '2',
  sayHello: null,
})
watchEffect(() => {
    // 拿到子組件的一些數(shù)據(jù)
    console.log(child1Ref.value)
    const obj = toRefs(child1Ref.value)
    console.log(obj.a, obj.b)
    state.name = obj.b
    state.age = obj.a
    state.sayHello = obj.onSayHello
})
</script>
<template>
  {{ state.age }} -- {{ state.name }}
  <button @click="state.sayHello">say hello</button>
  <Test ref="child1Ref"/>
</template>

2. 子組件

<script setup>
import { ref, defineExpose } from 'vue'
const a = ref(101)
const b = ref('sddewfewfew')
const onSayHello = () => {
  console.log('hello')
}
defineExpose({
    a,
    b,
    onSayHello,
})
</script>
<template>
    <p>Child1</p>
</template>

到此這篇關(guān)于vue3通過(guò)ref獲取子組件defineExpose的數(shù)據(jù)和方法的文章就介紹到這了,更多相關(guān)vue3獲取defineExpose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式
這篇文章主要介紹了vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-08-08
Vue組件化編程詳解
文章介紹了Vue中組件的基本使用、定義、注冊(cè)、書寫標(biāo)簽和嵌套等關(guān)鍵步驟和注意事項(xiàng),詳細(xì)解釋了組件的配置選項(xiàng)、如何通過(guò)Vue.extend創(chuàng)建組件以及組件實(shí)例對(duì)象與Vue實(shí)例對(duì)象的區(qū)別,還提及了單文件組件的結(jié)構(gòu)和編寫邏輯,并強(qiáng)調(diào)了組件原型鏈的重要性
2025-10-10
Vue3使用dayjs以及dayjs日期工具類詳解
這篇文章主要介紹了Vue3使用dayjs以及dayjs日期工具類,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log
console.log一般都是在開發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-05-05
Vue3+X6流程圖實(shí)現(xiàn)數(shù)據(jù)雙向綁定詳解
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合X6流程圖實(shí)現(xiàn)數(shù)據(jù)雙向綁定,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
VSCode中書寫Vue無(wú)代碼提示該如何解決
vscode開發(fā)vue非常好用,因?yàn)橛泻芏嗟牟寮?可以補(bǔ)全語(yǔ)法,或者高亮便于檢查錯(cuò)誤,但我最近發(fā)現(xiàn)我的vscode卻沒有了代碼提示,這篇文章主要給大家介紹了關(guān)于VSCode中書寫Vue無(wú)代碼提示該如何解決的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接
這篇文章主要介紹了Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接，Vue跨端渲染是一種基于Vue框架的跨平臺(tái)開發(fā)技術(shù)，能夠?qū)崿F(xiàn)Web、iOS和Android三端的無(wú)縫銜接，提高開發(fā)效率和用戶體驗(yàn)
2023-05-05
vue移動(dòng)端監(jiān)聽滾動(dòng)條高度的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue移動(dòng)端監(jiān)聽滾動(dòng)條高度的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個(gè)數(shù)據(jù)結(jié)構(gòu))
這篇文章主要介紹了手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個(gè)數(shù)據(jù)結(jié)構(gòu)),響應(yīng)式就是被觀察的數(shù)據(jù)變化的時(shí)候做一系列聯(lián)動(dòng)處理。就像一個(gè)社會(huì)熱點(diǎn)事件，當(dāng)它有消息更新的時(shí)候，各方媒體都會(huì)跟進(jìn)做相關(guān)報(bào)道。這里社會(huì)熱點(diǎn)事件就是被觀察的目標(biāo)
2022-06-06