假设我有一个具有子组件的主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>因此，当我单击内部按钮时，该increaseCount()方法将绑定到其click事件，因此会被调用。无法将事件绑定到外部按钮，我正在使用jQuery监听其单击事件，因此我将需要其他一些调用方法increaseCount。
编辑
看来这可行：
vm.$children[0].increaseCount();
但是，这不是一个好的解决方案，因为我是通过子数组中的索引来引用该组件的，而对于许多组件而言，这不太可能保持恒定并且代码的可读性也较低。
最后，我选择使用Vue的ref指令。这允许从父级引用组件以进行直接访问。
例如
在我的父实例上注册了组件：
var vm = new Vue({
el: '#app',
components: { 'my-component': myComponent }
});
使用引用渲染模板/ 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/）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句