vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

在setup()钩子函数中调用

父组件

<template>
<div>
       我是父组件
       <children ref="childrenRef" />
       <button @click="handleChildren">触发子组件</button>
   </div>
</template>

<script lang="ts">
   import { ref, defineComponent } from 'vue'
   import Children from './components/Children.vue';
   export default defineComponent({
   components: { Children }
       setup() {
           // ref的泛型除了指定any外 还可以指定<InstanceType<typeof Children>>
           const childrenRef = ref<any>();
           const handleChildren = () => childrenRef.value.isChildren();
           return {
               childrenRef,
               handleChildren
           }
       },
   })
</script>

子组件：

<template>
<div>
   我是子组件
</div>
</template>

<script lang="ts">
   import { defineComponent } from 'vue'

export default defineComponent({
       setup() {
           const isChildren = () => {
               console.log("我是子组件");
           }
           return {
               isChildren,
           }
       }
   })
</script>

如果是在setup()钩子函数中使用，父组件通过ref获取到子组件实例后，直接.value.函数名即可调用子组件所定义的函数。其中ref的泛型可以指定any和InstanceType<typeof Children>

在<srcipt setup>中调用

父组件

<template>
<div>
   我是子组件
</div>
</template>

<script lang="ts">
   import { defineComponent } from 'vue'

export default defineComponent({
       setup() {
           const isChildren = () => {
               console.log("我是子组件");
           }
           return {
               isChildren,
           }
       }
   })
</script>

子组件

<template>
   <div>
       我是子组件
   </div>
</template>

<script setup lang="ts">
   import { defineExpose } from 'vue';
   const isChildren = () => {
       console.log("我是子组件的第一个方法");
   }
   const isChildren2 = () => {
       console.log("我是子组件的第二个方法");
   }
   defineExpose({ isChildren, isChildren2 })
</script>

在<srcipt setup>中调用和setup()钩子函数中调用不同的是：子组件中要通过defineExpose将方法暴露给父组件。

??官网说明地址

来源：https://blog.csdn.net/qq_60361946/article/details/126333011