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()函数。

我正在寻找执行此操作的最佳实践方法。我看到的建议包括 Event Bus 和 Child Component Refs 和 props 等。

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

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

谢谢！

Answer 1

我不确定这是不是最好的方法。但我可以解释我能做什么...... Codesandbox 演示：https://codesandbox.io/s/q4xn40935w

从父组件发送一个prop 数据让我们说msg。每当单击按钮切换msg true/false时，父级都有一个button

<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>

在子组件watch 道具数据msg。每当msg 更改触发一个方法。

 <template>
  <div class="child">I am Child Component</div>
</template>

<script>
export default {
  name: "child",
  props: ["msg"],
  watch: {
    msg() {
      this.sayHello();
    }
  },
  methods: {
    sayHello() {
      alert("hello");
    }
  }
};
</script>

Answer 2

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

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

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

Answer 3

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

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

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

• 事件总线
• vuex

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

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

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

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

   data () {
    return {
      trigger: 0
    }
   }
   

3. 在父组件上使用prop

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

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

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

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

Answer 4

一个简单的解决方案是使用 vanilla JS 中的custom events。

在父组件中：

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

在子组件中：

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

Answer 5

我不喜欢使用 props 作为触发器的样子，但使用 ref 似乎也是一种反模式，通常不推荐。

另一种方法可能是：您可以使用事件来公开方法接口来调用子组件，这样您就可以在保持代码干净的同时获得两全其美的效果。只需在安装阶段发射它们并在高兴时使用它们。我将它存储在下面代码中的 $options 部分，但您可以随心所欲。

子组件

<template>
  <div>
    <p>I was called {{ count }} times.</p>
  </div>
</template>

<script>
  export default {
    mounted() {
      // Emits on mount
      this.emitInterface();
    },
    data() {
      return {
        count: 0
      }
    },
    methods: {

      addCount() {
        this.count++;
      },

      notCallable() {
        this.count--;
      },

      /**
       * Emitting an interface with callable methods from outside
       */
      emitInterface() {
        this.$emit("interface", {
          addCount: () => this.addCount()
        });
      }

    }
  }
</script>

父组件

<template>
  <div>
    <button v-on:click="addCount">Add count to child</button>
    <child-component @interface="getChildInterface"></child-component>
  </div>
</template>

<script>
  export default {
    // Add a default
    childInterface: {
      addCount: () => {}
    },

    methods: {
      // Setting the interface when emitted from child
      getChildInterface(childInterface) {
        this.$options.childInterface = childInterface;
      },

      // Add count through the interface
      addCount() {
        this.$options.childInterface.addCount();
      }
    }
  }
</script>