vue3.0 父组件调用子组件方法及获取子组件的值
通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异，但是思路还是一样的这里我详细的讲解一下他的调用方式及获取方法
1.第一步需要我们在父组件中定义一个方法 当我们点击这个方法的时候去调用子组件的方法
代码如下文章来源：https://www.toymoban.com/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 = () =>{
//通过ref去调取子组件的change方法
myRefs.value.change()
//这里也可以通过ref获取到子组件暴露出来想要父组件获取到的值
console.log(myRefs.value.age)
}
</script>
2.第二步需要我们在子组件中定义这个方法并暴露出来这里用到了一个钩子函数defineExpose文章来源地址https://www.toymoban.com/news/detail-621226.html
//子组件
<script setup lang="ts">
import {defineExpose} from "vue"
const age = 20
//在子组件中定义change方法
const change = () => {
alert(222)
}
//这里需要暴露出去不然父组件调用不到这个方法
defineExpose({
change
})
</script >
到了这里，关于vue3.0 父组件调用子组件方法及获取子组件的值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
