从组件外部调用Vue JS组件方法

比方说，我有一个主要的Vue实例有子组件。 有没有办法从Vue实例之外完全调用属于这些组件之一的方法？

这里是一个例子：

var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 1, }; }, methods: { increaseCount: function() { this.count++; } } }, } }); $('#external-button').click(function() { vm['my-component'].increaseCount(); // This doesn't work }); 

 <script src="http://vuejs.org/js/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"> <my-component></my-component> <br> <button id="external-button">External Button</button> </div> <template id="my-template"> <div style="border: 1px solid; padding: 5px;"> <p>A counter: {{ count }}</p> <button @click="increaseCount">Internal Button</button> </div> </template> 

所以当我点击内部button时， increaseCount()方法绑定到它的click事件，所以它被调用。 没有办法将事件绑定到我正在用jQuery监听的单击事件的外部button，所以我需要一些其他方法来调用increaseCount 。

编辑

看来这工作：

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

但是，这不是一个好的解决scheme，因为我通过在children数组中的索引来引用组件，并且有很多组件，这不太可能保持不变，代码的可读性也较差。

Answer 1

最后我select使用Vue的ref指令 。 这允许从父项引用组件直接访问。

例如

在我的父实例上注册一个权限：

 var vm = new Vue({ el: '#app', components: { myComponent: 'my-component' } }); 

使用引用来渲染模板/ html中的组件：

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

现在，在其他地方，我可以从外部访问组件

 <script> vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method </script> 

看这个小提琴的例子： https : //jsfiddle.net/xmqgnbu3/1/

（使用Vue 1的旧例子： https ： //jsfiddle.net/6v7y6msr/ ）

Answer 2

你可以使用Vue事件系统

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

和

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

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

Answer 3

在Vue2中这适用于：

 var bus = new Vue() 

//在组件A的方法中

 bus.$emit('id-selected', 1) 

//在组件B创build的钩子中

 bus.$on('id-selected', function (id) { // ... }) 

在这里查看Vue文档。 这里有更多关于如何设置这个事件总线的细节。