假设我有一个具有子组件的主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。
increaseCount()
increaseCount
编辑
看来这可行:
vm.$children[0].increaseCount();
但是,这不是一个好的解决方案,因为我是通过子数组中的索引来引用该组件的,而对于许多组件而言,这不太可能保持恒定并且代码的可读性也较低。
最后,我选择使用Vue的ref指令。这允许从父级引用组件以进行直接访问。
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>