vue3通過ref獲取子組件defineExpose的數據和方法

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

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

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(() => {
    // 拿到子組件的一些數據
    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>

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

您可能感興趣的文章:

使用Vue自定義指令實現Select組件
這篇文章主要介紹了使用Vue自定義指令實現Select組件,如果哪位朋友對vue自定義指令不是多了解的話，此篇文章會對你有所幫助的，需要的朋友可以參考下
2018-05-05
Vue.js項目前端多語言方案的思路與實踐
前端的國際化是一個比較常見的需求,但網上關于這一方面的直接可用的方案卻不多,這篇文章主要給大家介紹了關于Vue.js項目前端多語言方案的思路與實踐,需要的朋友可以參考下
2021-07-07
Element中table組件(el-table)右側滾動條空白占位處理
當我設置了max-height,就會在表格右側出現一列空白的占位,本文主要介紹了Element中table組件(el-table)右側滾動條空白占位處理,感興趣的可以了解一下
2023-09-09
Vue實現炫酷的代碼瀑布流背景
這篇文章主要為大家詳細介紹了Vue實現炫酷的代碼瀑布流背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
vue去除數組指定位置元素的幾種方法
這篇文章主要介紹了vue剔除數組指定位置元素的幾種方法,文中主要介紹了單個去除和批量去除這兩種方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下
2024-03-03
vue3實現自定義導航菜單的示例代碼
這篇文章主要為大家詳細介紹了如何使用vue3實現自定義導航菜單,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-11-11
淺談vue中數據雙向綁定的實現原理
本篇文章主要介紹了淺談vue中數據雙向綁定的實現原理，主要使用v-model這個數據雙向綁定，有興趣的可以了解一下
2017-09-09
vue+element-ui+sortable.js實現表格拖拽功能
這篇文章主要為大家詳細介紹了vue+element-ui+sortable.js實現表格拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vite(vue3)配置內網ip訪問的方法步驟
Vite是一個快速的構建工具,Vue3是一個流行的JavaScript框架,下面這篇文章主要給大家介紹了關于vite(vue3)配置內網ip訪問的方法步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-05-05
vue2中l(wèi)ess的安裝以及使用教程
less是css預處理器,對原先css進行了擴展和補充,下面這篇文章主要給大家介紹了關于vue2中l(wèi)ess的安裝以及使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12