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

Question

假设我有一个具有子组件的主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();

但是，这不是一个好的解决方案，因为我是通过子数组中的索引来引用该组件的，而对于许多组件而言，这不太可能保持恒定并且代码的可读性也较低。

Answer 1

最后，我选择使用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>