Vue3+TypeScript：调用插槽子组件方法及循环报错解决

一、基础场景：Child组件触发插槽内GrandChild的方法 #

可行，推荐两种实现方案，优先选择符合Vue单向数据流的方案：

方案1：自定义事件+父组件Ref（推荐） #

核心思路：Child组件通过自定义事件通知父组件，父组件通过Ref调用GrandChild的方法，避免组件间耦合。

修改后的代码：

Child.vue

<script setup lang="ts">
// 定义自定义事件
const emit = defineEmits(['trigger-slot-method'])
</script>

<template>
    <div class="child">
        <h3>I'm the child</h3>
        <slot />
        <button @click="emit('trigger-slot-method')">Call myMethod in GrandChild</button>
    </div>
</template>

GrandChild.vue

（需要暴露方法给父组件，因为<script setup>默认闭包）

<script setup lang="ts">
import { ref } from 'vue';

const called = ref(false);

function myMethod() {
    called.value = true;
    console.log('myMethod called in grandchild component');
}

// 暴露方法给外部组件
defineExpose({
  myMethod
})
</script>

<template>
    <div class="grandchild">
        <h4>I'm the grandchild</h4>
        <p v-if="called">Parent called <em>myMethod</em> of grandchild.</p>
    </div>
</template>

Parent.vue

<script setup lang="ts">
import Child from './TestSlotsChild.vue';
import GrandChild from './TestSlotsGrandChild.vue';
import { ref } from 'vue'

// 声明Ref类型为GrandChild实例或null
const grandChildRef = ref<InstanceType<typeof GrandChild> | null>(null)

const handleTrigger = () => {
  // 可选链调用避免空值报错
  grandChildRef.value?.myMethod()
}
</script>

<template>
    <div class="parent">
        <h2>I'm the parent</h2>
        <Child @trigger-slot-method="handleTrigger">
            <GrandChild ref="grandChildRef"/>
        </Child>
    </div>
</template>

方案2：作用域插槽注册方法（耦合度较高） #

如果需要Child直接控制插槽组件方法，可通过作用域插槽让插槽内组件注册自身方法到Child：

修改后的代码：

Child.vue

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

// 存储插槽组件注册的方法
const slotMethods = ref<(() => void)[]>([])

const callSlotMethods = () => {
  slotMethods.value.forEach(method => method())
}

// 提供注册方法给插槽
const registerMethod = (method: () => void) => {
  slotMethods.value.push(method)
}
</script>

<template>
    <div class="child">
        <h3>I'm the child</h3>
        <slot :register-method="registerMethod" />
        <button @click="callSlotMethods">Call myMethod in GrandChild</button>
    </div>
</template>

Parent.vue

<script setup lang="ts">
import Child from './TestSlotsChild.vue';
import GrandChild from './TestSlotsGrandChild.vue';
</script>

<template>
    <div class="parent">
        <h2>I'm the parent</h2>
        <Child v-slot="{ registerMethod }">
            <GrandChild @register="registerMethod" />
        </Child>
    </div>
</template>

GrandChild.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const called = ref(false);
const emit = defineEmits(['register'])

function myMethod() {
    called.value = true;
    console.log('myMethod called in grandchild component');
}

// 组件挂载时注册方法到Child
onMounted(() => {
  emit('register', myMethod)
})
</script>

<template>
    <div class="grandchild">
        <h4>I'm the grandchild</h4>
        <p v-if="called">Parent called <em>myMethod</em> of grandchild.</p>
    </div>
</template>

注意：直接给<slot>加Ref无法获取插槽内组件实例，因为slot只是占位符，Ref必须绑定到插槽内的具体组件上。

二、循环场景：解决TypeScript类型错误 #

错误原因 #

v-for循环中绑定Ref时，Vue会自动将Ref转为数组，但TypeScript无法自动推断数组元素的类型，且你之前使用useTemplateRef仅适用于单个Ref，导致类型推断失败。

解决代码 #

Parent.vue（循环场景）

<script setup lang="ts">
import { ref, computed } from 'vue';
import Child from './TestSlotsChild.vue';
import GrandChild from './TestSlotsGrandChild.vue';

// 手动声明Ref为GrandChild实例的数组
const gcRefs = ref<InstanceType<typeof GrandChild>[]>([])

const someArray = computed(() => [
    {childComponent: Child, grandChildComponent: GrandChild},
    {childComponent: Child, grandChildComponent: GrandChild},
]);

// 根据索引触发对应GrandChild的方法
const triggerGrandChildMethod = (index: number) => {
  gcRefs.value[index]?.myMethod()
}
</script>

<template>
    <div class="parent">
        <h2>I'm the parent</h2>

        <div v-for="(element, index) in someArray" :key="index">
            <component
                :is="element.childComponent"
                @trigger-slot-method="() => triggerGrandChildMethod(index)"
            >
                <component 
                    :is="element.grandChildComponent" 
                    ref="gcRefs" 
                />
            </component>
        </div >
    </div>
</template>

关键要点 #

1. 手动指定Ref类型为InstanceType<typeof GrandChild>[]，明确数组元素是GrandChild的实例；
2. 通过循环索引定位到对应的Ref元素，调用方法；
3. 确保GrandChild组件已通过defineExpose暴露myMethod；
4. 若数组元素有唯一标识，建议用唯一标识作为key（而非index），提升渲染性能。

内容的提问来源于stack exchange，提问作者Jimbo