Vue.js 在子组件中调用方法的Vue最佳实践

我已经阅读了很多关于这方面的文章，似乎有多种方法可以做到这一点，许多作者建议不要使用某些实现

为了简单起见，我创建了一个非常简单的版本来实现我想要实现的目标

我有一个父Vue，parent.Vue。它有一个按钮：

<template>
    <div>
        <button v-on:click="XXXXX call method in child XXXX">Say Hello</button>
    </div>
</template>

我想在单击父菜单中的按钮时调用

sayHello（）

函数

我正在寻找实现这一目标的最佳实践方法。我看到的建议包括事件总线、子组件引用和道具等

在我的方法中，执行函数的最简单方法是什么

抱歉，这看起来非常简单，但我确实尝试过做一些研究

---

谢谢

我不确定这是不是最好的办法。但我可以解释我能做什么。。。 代码沙盒演示：

从父组件发送

prop

数据，例如

msg

。每当单击按钮切换

msg

true/false时，在父级上有一个

按钮

<template>
  <div class="parent">
    Button from Parent : 
    <button @click="msg = !msg">Say Hello</button><br/>
    <child :msg="msg"/>
  </div>
</template>

<script>
import child from "@/components/child";

export default {
  name: "parent",
  components: { child },
  data: () => ({
    msg: false
  })
};
</script>

---

一个简单的方法是：

点击我

---

只需为子组件创建一个

ref

，您就可以调用方法并访问它拥有的所有数据。

您可以创建一个

ref

并访问方法，但不建议这样做。您不应该依赖组件的内部结构。这样做的原因是您将紧密耦合组件，而创建组件的主要原因之一就是松散耦合组件

您应该依靠

合同

（某些框架/语言中的接口）来实现这一点。

Vue

中的

合同

依赖于这样一个事实：父母通过

道具与子女沟通

，

子女通过
事件与父母沟通

当您希望在非父/子组件之间进行通信时，至少还有两种其他通信方法：


活动巴士


我现在将描述如何使用道具：

1.在子组件上定义它

props:['testProp']，
方法：{
你好{
警惕（“你好”）；
}
}

2.在父组件上定义触发器数据

数据（）{
返回{
触发器：0
}
}

3.在父组件上使用道具



4.观察子组件中的
testProp
，并调用
sayHello

watch:{
testProp:function（newVal、oldVal）{
这个。sayHello（）
}
}

5.从父组件更新触发器。确保始终更改
触发器的值，否则
手表将无法启动。一种方法是增加触发器，或者将其从truthy值切换为falsy值（this.trigger=！this.trigger）
一个简单的解决方案是从vanilla JS使用

在父组件中：

const customEvent = new CustomEvent('custom-event');
document.dispatchEvent(customEvent);

document.addEventListener('custom-event', this.functionToCall);

在子组件中：

const customEvent = new CustomEvent('custom-event');
document.dispatchEvent(customEvent);

document.addEventListener('custom-event', this.functionToCall);

我不喜欢这里用道具作为触发器的方式。我怀疑这是vue推荐的解决方案。当您更改
触发器
变量时，不清楚您是否正在调用函数。您现在对“组件的内部结构”的依赖程度与调用
$refs.childComp.sayHello（）
一样，因为
testProp
是一个属性，就像
sayHello（）
一样。实际上，使用props从父级到子级进行通信是推荐的方法。您不是依赖于组件的内部结构，而是依赖于组件公开的道具，这与接口或类的公共字段的行为非常相似。目前，道具调用sayHello的事实是一个实现细节。父级不应该依赖于此，它应该依赖于这样一个事实，即testProp所做的是有文档记录的，而不看实现。如果您正在演示如何使用prop和watcher调用函数，那么这是一个糟糕的设计，仍然是耦合的。更好的方法是发出一个“triggerAlert”事件并在父级中实现该方法，但就个人而言，有时会觉得这违反了SRP。就我个人而言，我不认为在有意义的地方调用公开的方法有什么错。我看到太多的例子，人们在只需要进行方法调用的情况下就扭曲实现来适应道具/事件。虽然这解决了问题，但从长远来看，这可能是一个糟糕的代码可读性解决方案。当问题要求“最佳实践”时，情况尤其如此