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

Question

我一直在阅读很多关于此的文章，并且似乎有多种方法可以做到这一点，许多作者建议反对某些实现。

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

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

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

在子 Vue 中， child.vue 我有一个带有函数的方法：

 methods: {
    sayHello() {

        alert('hello');
   }
  }

当我单击父级中的按钮时，我想调用 sayHello() 函数。

我正在寻找执行此操作的最佳实践方法。我看到的建议包括事件总线、子组件 Refs 和 props 等。

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

抱歉，这看起来确实非常简单，但我真的试图做一些研究。

谢谢！

原文由 user1525612 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您应该依靠合同（某些框架/语言中的接口）来实现这一点。 Vue 中的契约依赖于父母通过 props 与孩子交流，孩子通过 events 与父母交流的事实。

当您想在非父/子组件之间进行通信时，还有至少 2 种其他方法可以进行通信：

• 事件总线
• Vuex

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

1. 在您的子组件上定义它

   props: ['testProp'],
   methods: {
     sayHello() {
       alert('hello');
     }
   }

1. 在父组件上定义一个触发数据

   data () {
    return {
      trigger: 0
    }
   }

1. 在父组件上使用 prop

    <template>
    <div>
       <childComponent :testProp="trigger"/>
     </div>
   </template>

1. 在子组件中观察 testProp 并调用 sayHello

    watch: {
       testProp: function(newVal, oldVal) {
         this.sayHello()
       }
   }

1. 从父组件更新 trigger 。确保您始终更改 trigger 的值，否则 watch 不会触发。一种方法是增加触发器，或将其从真值切换为假值（ this.trigger = !this.trigger ）

原文由 Radu Diță 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一种简单的方法是这样做：

 <!-- parent.vue -->
<template>
    <button @click="$refs.myChild.sayHello()">Click me</button>
    <child-component ref="myChild" />
</template>

只需为子组件创建一个 ref ，您就可以调用这些方法，并访问它拥有的所有数据。

原文由 Flame 发布，翻译遵循 CC BY-SA 4.0 许可协议