vue3.0 父组件调用子组件方法及获取子组件的值

vue3.0 父组件调用子组件方法及获取子组件的值

通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异，但是思路还是一样的这里我详细的讲解一下他的调用方式及获取方法

1.第一步需要我们在父组件中定义一个方法 当我们点击这个方法的时候去调用子组件的方法
代码如下

//父组件
<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

//子组件
<script setup lang="ts">
import {defineExpose} from "vue"
const age = 20
//在子组件中定义change方法
const change = () => {
  alert(222)
}
//这里需要暴露出去不然父组件调用不到这个方法
defineExpose({
  change
})
</script >