插槽内子组件中的触发方法，$refs 不起作用答案

【问题标题】：Trigger method in sub component inside slot, $refs not working插槽内子组件中的触发方法，$refs 不起作用
【发布时间】：2020-05-25 17:13:47
【问题描述】：

我在特定的模态组件中有以下模板：

<template>
  <my-base-modal ref="BaseModal" :width="1000">
    <template v-slot:header>Details</template>
    <template v-slot:body>
        <detail-card ref="DetailCard"></detail-card>
    </template>
  </my-base-modal>
</template>

它创建一个基本模式并覆盖标题和正文的插槽。 body 插槽中填充了一个需要加载一些数据的子组件。

我尝试使用以下方法打开并加载此模态的内容：

open (id) {
   this.$refs.DetailCard.load(id)
   this.$nextTick(() => {
     this.$refs.BaseModal.open()
   })
 }

但this.$refs.DetailCard 始终未定义。我怀疑这是因为引用 DetailCard 是在 <base-modal> 组件的 body slot 内定义的？

在这个例子中，我应该如何在 <detail-card> 组件上触发一个函数，而不使用 EventBus 或向其中传递一些道具？

【问题讨论】：

我在这里大胆猜测一下，BaseModal 的主体在调用 open 之前没有渲染，这意味着它的内部 DOM 元素（包括主体槽）在运行时不可用。
BaseModal 周围有一个v-if="isOpen"。如果我将其更改为v-show="isOpen"，它将按预期工作。谢谢！如果您将其写为答案，我可以接受。

标签： javascript vue.js

【解决方案1】：

我怀疑在运行时，直到调用BaseModal 的open 方法才呈现DOM。因此，this.$refs.DetailCard 将返回 undefined，因为您的组件的 body 插槽尚未使用嵌套组件进行渲染。

正如您在 cmets 中提到的，修复可以像确保 DOM 已经渲染一样简单，例如使用v-show 而不是v-if。

【讨论】：