vue3父組件使用ref獲取子組件的屬性和方法
更新時間：2023年11月17日 10:01:49 作者：Kratial
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細的代碼講解,需要的朋友可以參考下
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref:
1.<script setup> 中定義響應式變量 例如： const demo1 = ref(null)
2.在引入的子組件標簽上綁定ref屬性的值與定義的響應式變量同名( <demo1 ref="demo1"/>)。
父組件代碼如下：
<template>
<demo1 ref="demo1"/>
<demo2 ref="demo2"/>
<demo3 ref="demo3"/>
</template>
<script setup>
import Demo1 from '@/components/demo1.vue'
import Demo2 from '@/components/demo2.vue'
import Demo3 from '@/components/demo3.vue'
import {ref,onMounted} from 'vue'
const demo1 = ref(null)
const demo2 = ref(null)
const demo3 = ref(null)
onMounted(()=> {
console.log(demo1.value.count,'demo1子組件')
console.log(demo2.value?.a,'demo2子組件')
console.log(demo3.value.list[0],"demo3子組件")
})
</script>
子組件代碼如下：
demo1.vue
<template>
<h1>i'm demo1 content{{count}}</h1>
</template>
<script >
import {ref} from 'vue'
export default {
setup () {
const count = ref(999)
return {
count
}
}
}
此時父組件可以獲取到子組件的count屬性
demo2
<template>
<h1>我是demo2</h1>
</template>
<script setup>
import {defineExpose,ref} from 'vue'
const a = ref('helloss')
</script>
當使用 <script setup> 寫法會導致父組件無法訪問到子組件中的屬性和方法。
使用
<script setup>的組件，想要讓父組件訪問到它的屬性和方法需要借助與defineExpose來指定需要暴露給父組件的屬性。
更改后的demo2組件
<template>
<h1>我是demo2</h1>
</template>
<script setup>
import {defineExpose,ref} from 'vue'
const a = ref('helloss')
defineExpose({
a
})
</script>
demo3
<template>
<h1>我是demo3</h1>
</template>
<script>
export default {
data () {
return {
list:['a','b','c']
}
},
methods: {
btn () {
}
}
}
這種方式，父組件可以正常獲取到里面的屬性和方法。
到此這篇關于vue3父組件使用ref獲取子組件的屬性和方法的文章就介紹到這了,更多相關vue3 ref取獲取子組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
關于Vue3父子組件emit參數傳遞問題(解決Vue2this.$emit無效問題)
相信很多人在利用事件驅動向父組件扔東西的時候，發(fā)現原來最常用的this.$emit咋報錯了,竟然用不了了,下面通過本文給大家分享關于Vue3父子組件emit參數傳遞問題(解決Vue2this.$emit無效問題),需要的朋友可以參考下2022-07-07
laravel+vue組合的項目中引入ueditor方式(打包成組件形式)
今天小編就為大家分享一篇laravel+vue組合的項目中引入ueditor方式(打包成組件形式)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue多頁面配置，單頁應用這個概念，是隨著前幾年 AngularJS、React、Ember 等這些框架的出現而出現的。在前面的前言內容里，我們在頁面渲染中講了頁面的局部刷新,而單頁應用則是使用了頁面的局部刷新的能力,下面來看看詳細內容,需要的朋友可以參考一下2021-11-11
這篇文章主要給大家介紹了關于vue項目回到頂部的兩種超簡單實現方法,?頁面切換回到頂部是一個很常見的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue請求JSON Server服務器數據的實現方法,需要的朋友可以參考下2018-11-11
最近項目需要將原vue項目結合ts的使用進行改造,這個后面應該是中大型項目的發(fā)展趨勢,下面這篇文章主要給大家介紹了關于vue3項目中引入ts的相關資料,需要的朋友可以參考下2022-09-09
最近翻閱了一下vue。發(fā)覺有一個單文件組件之前基本忽視掉了。所以本文就詳細的介紹了vue單文件組件的實現，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue.js@2.6.10更新內置錯誤處機制Fundebug同步支持相應錯誤監(jiān)控
這篇文章主要介紹了Vue.js@2.6.10更新內置錯誤處機制，Fundebug同步支持相應錯誤監(jiān)控 ,需要的朋友可以參考下2019-05-05
本文主要介紹了vue實現列表拖拽排序的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要為大家詳細介紹了vue調取電腦攝像頭實現拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09