如何从 Vue.js 中的另一个组件调用函数

在 Vue.js 中，通过事件来调用方法是很常见的。假如你需要从一个组件中调用另一个组件的方法，有几种方法可以实现此功能。在本文中，我们将探讨其中的两种方法。

方法一：使用 $emit

Vue.js 中的 $emit 方法允许我们从一个组件向其父组件发送自定义事件。我们可以利用这个方法来调用另一个组件中的方法。

举个例子，假设我们在父组件 Parent.vue 中有一个子组件 Child.vue：

<!-- Parent.vue -->
<template>
  <div>
    <Child @custom-event="customMethod"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  methods: {
    customMethod() {
      // Do something in parent component
    },
  },
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <button @click="emitCustomEvent"></button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event');
    },
  },
}
</script>

在上述代码中，我们在 Child.vue 组件中的 emitCustomEvent 方法中触发了一个名为 custom-event 的自定义事件。在 Parent.vue 组件中，我们通过添加 @custom-event 监听器来监听该事件，并调用了 customMethod 方法。

通过这种方法，我们就可以从 Child.vue 组件中调用 Parent.vue 组件的方法。

方法二：使用 $refs

另一个可行的方法是使用 $refs。在 Vue.js 中，我们可以使用 ref 来给元素或组件分配引用 ID，然后使用 $refs 访问这些引用。通过这种方式，我们能够在父组件中直接访问子组件中的方法。

举个例子：

<!-- Parent.vue -->
<template>
  <div>
    <Child ref="child"></Child>
    <button @click="callChildMethod"></button>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    },
  },
}
</script>

<!-- Child.vue -->
<template>
  <div></div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      // Do something in child component
    },
  },
}
</script>

在上述代码中，我们在父组件中使用 ref 分配了一个名为 child 的引用 ID 给子组件 Child.vue。在 Parent.vue 组件中，我们可以通过 this.$refs.child 直接访问子组件中的 childMethod 方法。

通过这种方法，我们也可以从 Parent.vue 组件中调用 Child.vue 组件的方法。

以上就是从 Vue.js 中的另一个组件调用函数的两种方法，你可以根据自己的需要选择其中的一种。无论你使用哪种方法，都要确保组件之间的通信是清晰明了的，这样可以提高代码的可维护性和可读性。