vue3父組件使用ref獲取子組件的屬性和方法

更新時(shí)間：2023年11月17日 10:01:49 作者：Kratial

在vue3中父組件訪問(wèn)子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細(xì)的代碼講解,需要的朋友可以參考下

在vue3中父組件訪問(wèn)子組件中的屬性和方法是需要借助于ref:

1.<script setup> 中定義響應(yīng)式變量例如： const demo1 = ref(null)

2.在引入的子組件標(biāo)簽上綁定ref屬性的值與定義的響應(yīng)式變量同名( <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
        }
    }
}

此時(shí)父組件可以獲取到子組件的count屬性

demo2

<template>
  <h1>我是demo2</h1>
</template>

<script setup>
import {defineExpose,ref} from 'vue'
const a = ref('helloss')
</script>

當(dāng)使用 <script setup> 寫法會(huì)導(dǎo)致父組件無(wú)法訪問(wèn)到子組件中的屬性和方法。

使用 <script setup> 的組件，想要讓父組件訪問(wèn)到它的屬性和方法需要借助與defineExpose來(lái)指定需要暴露給父組件的屬性。

更改后的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 () { 
    }
  }
}

這種方式，父組件可以正常獲取到里面的屬性和方法。

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

您可能感興趣的文章:

相關(guān)文章

詳解vue在項(xiàng)目中使用百度地圖
這篇文章主要介紹了vue在項(xiàng)目中使用百度地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
這篇文章主要介紹了Vue中filter使用及根據(jù)id刪除數(shù)組元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue addRoutes路由動(dòng)態(tài)加載操作
這篇文章主要介紹了vue addRoutes路由動(dòng)態(tài)加載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue 查看dist文件里的結(jié)構(gòu)(多種方式)
本文通過(guò)三種方式給大家介紹了vue 查看dist文件里的結(jié)構(gòu),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
vue.js實(shí)現(xiàn)日歷插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪問(wèn)后端接口的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪問(wèn)后端接口的解決辦法,記錄一下項(xiàng)目需要注意的地方,方便以后快速使用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
Vue.js 表單控件操作小結(jié)
這篇文章給大家介紹了Vue.js 表單控件操作的相關(guān)知識(shí)，本文通過(guò)實(shí)例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-03-03
vue中v-mode詳解及使用示例詳解
這篇文章主要介紹了vue中v-mode詳解以及具體的使用示例,在組件中使用?v-model?時(shí),需要定義model選項(xiàng),指定綁定的prop和事件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue 2.X的狀態(tài)管理vuex記錄詳解
這篇文章主要介紹了Vue 2.X的狀態(tài)管理vuex記錄的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03