从组件外部调用Vue.js组件方法

假设我有一个主Vue实例，它有子组件。是否有一种方法可以完全从Vue实例外部调用属于这些组件之一的方法?

这里有一个例子:

因此，当我单击内部按钮时，increecount()方法被绑定到它的click事件，因此它被调用。没有办法将事件绑定到外部按钮，我正在用jQuery监听其单击事件，所以我需要其他方法来调用增加量计数。

EDIT

这似乎是可行的:

vm.$children[0].increaseCount();

然而，这不是一个好的解决方案，因为我是通过它在子数组中的索引来引用组件的，对于许多组件来说，这不太可能保持不变，代码的可读性也较差。

当前回答

您可以使用Vue事件系统

vm.$broadcast('event-name', args)

and

 vm.$on('event-name', function())

这是小提琴: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

其他回答

如果你使用Vue 3和<script setup> sugar，请注意，组件的内部绑定是关闭的(从组件外部不可见)，你必须使用defineExpose(参见docs)使它们从外部可见。就像这样:

<script setup lang="ts">
const method1 = () => { ... };
const method2 = () => { ... };

defineExpose({
  method1,
  method2,
});
</script>

自

默认情况下关闭正在使用的组件

这里有一个简单的例子

this.$children[indexOfComponent].childsMethodName();

你可以为子组件设置引用，然后在父组件中调用$refs:

为子组件添加引用:

<my-component ref="childref"></my-component>

添加点击事件到父:

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

您可以使用Vue事件系统

vm.$broadcast('event-name', args)

and

 vm.$on('event-name', function())

这是小提琴: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

一个稍微不同(更简单)的公认答案:

在父实例上注册一个组件:

export default {
    components: { 'my-component': myComponent }
}

在template/html中使用引用渲染组件:

<my-component ref="foo"></my-component>

访问组件方法:

<script>
    this.$refs.foo.doSomething();
</script>

推荐文章