vue3通過ref獲取子組件defineExpose的數(shù)據(jù)和方法
更新時(shí)間：2023年10月09日 09:29:34 作者：qq_42750608
defineExpose是Vue3中新增的選項(xiàng),用于向父組件暴露子組件內(nèi)部的屬性和方法,通過defineExpose,子組件可以主動(dòng)控制哪些屬性和方法可以被父組件訪問,本文主要介紹了vue3通過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通過ref獲取子組件defineExpose的數(shù)據(jù)和方法的文章就介紹到這了,更多相關(guān)vue3獲取defineExpose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用Vue自定義指令實(shí)現(xiàn)Select組件
這篇文章主要介紹了使用Vue自定義指令實(shí)現(xiàn)Select組件,如果哪位朋友對(duì)vue自定義指令不是多了解的話，此篇文章會(huì)對(duì)你有所幫助的，需要的朋友可以參考下2018-05-05
Vue.js項(xiàng)目前端多語言方案的思路與實(shí)踐
前端的國(guó)際化是一個(gè)比較常見的需求,但網(wǎng)上關(guān)于這一方面的直接可用的方案卻不多,這篇文章主要給大家介紹了關(guān)于Vue.js項(xiàng)目前端多語言方案的思路與實(shí)踐,需要的朋友可以參考下2021-07-07
Element中table組件(el-table)右側(cè)滾動(dòng)條空白占位處理
當(dāng)我設(shè)置了max-height,就會(huì)在表格右側(cè)出現(xiàn)一列空白的占位,本文主要介紹了Element中table組件(el-table)右側(cè)滾動(dòng)條空白占位處理,感興趣的可以了解一下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue剔除數(shù)組指定位置元素的幾種方法,文中主要介紹了單個(gè)去除和批量去除這兩種方法,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue3實(shí)現(xiàn)自定義導(dǎo)航菜單的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue3實(shí)現(xiàn)自定義導(dǎo)航菜單,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ，主要使用v-model這個(gè)數(shù)據(jù)雙向綁定，有興趣的可以了解一下2017-09-09
vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vite(vue3)配置內(nèi)網(wǎng)ip訪問的方法步驟
Vite是一個(gè)快速的構(gòu)建工具,Vue3是一個(gè)流行的JavaScript框架,下面這篇文章主要給大家介紹了關(guān)于vite(vue3)配置內(nèi)網(wǎng)ip訪問的方法步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
less是css預(yù)處理器,對(duì)原先css進(jìn)行了擴(kuò)展和補(bǔ)充,下面這篇文章主要給大家介紹了關(guān)于vue2中l(wèi)ess的安裝以及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12