vue3.0 父組件調(diào)用子組件方法及獲取子組件的值
通過(guò)對(duì)比2.0的獲取及調(diào)用方式這里我們也可以借鑒2.0中的this.$refs去獲取3.0和2.0的refs獲取的方式有點(diǎn)大同小異，但是思路還是一樣的這里我詳細(xì)的講解一下他的調(diào)用方式及獲取方法
1.第一步需要我們?cè)诟附M件中定義一個(gè)方法 當(dāng)我們點(diǎn)擊這個(gè)方法的時(shí)候去調(diào)用子組件的方法
代碼如下文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-621226.html
//父組件
<template>
<son ref="myRefs"></son>
<button @click="giveParentHandVal">向父組件傳值</button>
</template>
<script setup lang="ts">
import son from '@/views/home/components/son.vue'
import {ref} from "vue"
//獲取綁定的ref
const myRefs = ref();
const giveParentHandVal = () =>{
//通過(guò)ref去調(diào)取子組件的change方法
myRefs.value.change()
//這里也可以通過(guò)ref獲取到子組件暴露出來(lái)想要父組件獲取到的值
console.log(myRefs.value.age)
}
</script>
2.第二步需要我們?cè)谧咏M件中定義這個(gè)方法并暴露出來(lái)這里用到了一個(gè)鉤子函數(shù)defineExpose文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-621226.html
//子組件
<script setup lang="ts">
import {defineExpose} from "vue"
const age = 20
//在子組件中定義change方法
const change = () => {
alert(222)
}
//這里需要暴露出去不然父組件調(diào)用不到這個(gè)方法
defineExpose({
change
})
</script >
到了這里，關(guān)于vue3.0 父組件調(diào)用子組件方法及獲取子組件的值的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
