假设我有一个主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>

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

EDIT

这似乎是可行的:

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

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


当前回答

这是一种从其他组件访问一个组件的方法的简单方法

// This is external shared (reusable) component, so you can call its methods from other components

export default {
   name: 'SharedBase',
   methods: {
      fetchLocalData: function(module, page){
          // .....fetches some data
          return { jsonData }
      }
   }
}

// This is your component where you can call SharedBased component's method(s)
import SharedBase from '[your path to component]';
var sections = [];

export default {
   name: 'History',
   created: function(){
       this.sections = SharedBase.methods['fetchLocalData']('intro', 'history');
   }
}

其他回答

一个稍微不同(更简单)的公认答案:

在父实例上注册一个组件:

export default {
    components: { 'my-component': myComponent }
}

在template/html中使用引用渲染组件:

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

访问组件方法:

<script>
    this.$refs.foo.doSomething();
</script>

在组件中像这样声明你的函数:

export default {
  mounted () {
    this.$root.$on('component1', () => {
      // do your logic here :D
    });
  }
};

并像这样从任何页面调用它:

this.$root.$emit("component1");

假设你在子组件中有一个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或事件总线

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


这里有一个简单的例子

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

对于Vue2,这适用于:

var bus = new Vue()

//组件A的方法

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

//组件B创建的钩子

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

  // ...
})

在这里查看Vue文档。 这里详细介绍了如何设置这个事件总线。

如果您想了解何时使用属性、事件和/或集中状态管理的更多信息,请参阅本文。

请看下面托马斯关于Vue 3的评论。