应该如何调用 <slot> 标签内的子方法？答案

【问题标题】：How should call method of child that is inside <slot> tag?应该如何调用 <slot> 标签内的子方法？
【发布时间】：2019-09-14 10:27:07
【问题描述】：

请帮帮我。我正在使用带有动态组件加载的打字稿开发 Vue js 项目。我用来从数组加载组件名称，每个组件都有一个父包装器组件，并且在我用来渲染子组件的包装器内部。现在我想访问从包装组件中加载的子组件的方法。

我尝试了 $slot 功能，但没有运气，我也尝试了事件总线，但随后在多个子组件中调用方法。

<Wrapper>
  <component :is="propsData.componentName" :key="key"></component>
</Wrapper>

在侧 Wrapper 组件中

<div class="container">
    <slot></slot>
</div>

当某些事件发生时，我想从 Wrapper 组件调用动态加载组件中编写的方法。

【问题讨论】：

你必须避免这样调用方法，这是一种不好的做法。尝试使用 Vuex 使用事件，它更好更干净。
是的@Luis，我正在使用 Vuex 存储将数据传递给动态组件，但现在我想从父组件调用子方法，并且子组件是动态加载的。在父组件的槽中。
您的子组件对 VueX 数据更改做出反应，您可以使用这种方法在子组件中调用您想要的任何内容。让孩子们观看 VueX 道具，然后做他们需要做的事情。这适用吗？
@SuhasBhosale 如果您碰巧找到问题的解决方案或想分享您自己的解决方案，请随时回答您自己的问题并接受它作为答案。这样每个人都可以学习，问题就不会悬而未决。
@etarhan 我目前正在使用this.$children[1][childmethod]()，但我想要事件驱动的解决方案。我还没找到。

标签： vue.js

【解决方案1】：

您可以通过$children 属性检索 Wrapper 子组件，这将返回一个组件数组。示例用法如下（例如调用名为 childMethod 的子组件方法）：

this.$children[0].childMethod()

虽然上面的代码可以工作，但通常不被认为是一种好的做法。最好从子组件发出一个事件并监听这个事件，然后你可以在你的 Wrapper 组件中运行你的逻辑。

【讨论】：

嗨@etarhan，这可以工作，但这两个组件之间存在紧密耦合，我希望组件应该松散耦合。有没有其他方法可以在不紧密耦合的情况下访问子方法。
您可以将带有方法名称的道具传递给 Wrapper，并使用它来调用子方法。例如 this.children[0][childMethod]() ，虽然你真的应该研究像 vuex 这样的东西来实现你想要的解耦，因为我刚才提到的任何东西我都不会真正推荐。