从组件外部调用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监听其click事件,所以我还需要一些其他方法来调用increaseCount.

编辑

看来这很有效:

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

但是,这不是一个好的解决方案,因为我通过子数组中的索引引用组件,并且对于许多组件,这不太可能保持不变并且代码可读性较差.

Answer 1

最后我选择使用Vue的ref指令.这允许从父级引用组件以进行直接访问.

例如

在我的父实例上注册了一个compnent:

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

使用引用在template/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的创建钩子中

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

  // ...
})

请参阅此处了解Vue文档.而在这里是如何设置这个事件总线准确详细.

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

Answer 4

您可以为子组件设置ref，然后在父组件中可以通过$ refs调用：

将引用添加到子组件：

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

将点击事件添加到父项：

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

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

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

Answer 5

A slightly different (simpler) version of the accepted answer:

Have a component registered on the parent instance:

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

Render the component in template/html with a reference:

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

Access the component method:

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

Answer 6

如果您使用带有<script setup>Sugar 的 Vue 3，请注意组件的内部绑定是封闭的（从组件外部不可见），并且您必须使用defineExpose（请参阅文档）使它们从外部可见。像这样的东西：

<script setup lang="ts">
const method1 = () => { ... };
const method2 = () => { ... };

defineExpose({
  method1,
  method2,
});
</script>

自从

使用的组件默认<script setup>关闭

Answer 7

假设您child_method()在子组件中有一个：

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

现在，您要执行child_methodfrom父组件：

<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
        }
    }
}

如果要从子组件执行父组件方法：

this.$parent.name_of_method()

注意：不建议像这样访问子组件和父组件。

相反，作为最佳做法，请使用“道具和活动”进行亲子沟通。

如果您希望组件之间的通信一定要使用vuex或事件总线

请阅读这篇非常有帮助的文章

Answer 8

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

// 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');
   }
}