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

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

这里有一个例子:

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

EDIT

这似乎是可行的:

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

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

当前回答

这里有一个简单的例子

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

2018-03-06 04:20:22

其他回答

使用Vue 3:

const app = createApp({})

// register an options object
app.component('my-component', {
  /* ... */
})

....

// retrieve a registered component
const MyComponent = app.component('my-component')

MyComponent.methods.greet();

https://v3.vuejs.org/api/application-api.html#component

2020-10-21 09:57:17

您可以使用Vue事件系统

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

and

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

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

2015-11-12 23:44:45

这里有一个简单的例子

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

2018-03-06 04:20:22

有时您希望将这些内容包含在组件中。根据DOM状态(当Vue组件实例化时，监听的元素必须存在于DOM中)，您可以从Vue组件内部监听组件外部元素上的事件。假设在组件外部有一个元素，当用户单击它时，您希望组件做出响应。

在html中，你有:

<a href="#" id="outsideLink">Launch the component</a>
...
<my-component></my-component>

在你的Vue组件中:

    methods() {
      doSomething() {
        // do something
      }
    },
    created() {
       document.getElementById('outsideLink').addEventListener('click', evt => 
       {
          this.doSomething();
       });
    }

2020-09-21 17:21:56

假设你在子组件中有一个child_method():

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

现在你想从父组件执行child_method:

<template>
    <div>
        <button @click="exec">Execute child component</button>
        <child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
    </div>
</template>

export default {
    methods: {
        exec () { //accessing the child component instance through $refs
            this.$refs.child.child_method() //execute the method belongs to the child component
        }
    }
}

如果你想从子组件执行父组件方法:

parent.name_of_method美元。()

注意:不建议像这样访问子组件和父组件。

相反，作为最佳实践，使用道具和事件进行亲子交流。

如果你想要组件之间的通信，一定要使用vuex或事件总线

请阅读这篇非常有用的文章

2018-06-24 05:33:06

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

推荐文章

最新文章

标签