从组件外部调用 Vue.js 组件方法 [英] Call a Vue.js component method from outside the component

问题描述

假设我有一个包含子组件的主 Vue 实例.有没有办法完全从 Vue 实例外部调用属于这些组件之一的方法?

这是一个例子:

var vm = new Vue({el: '#app',成分: {我的组件":{模板:'#我的模板'，数据:函数(){返回 {计数:1，};},方法: {增加计数:函数(){this.count++;}}},}});$('#external-button').click(function(){vm['我的组件'].increaseCount();//这不起作用});

<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="应用程序"><我的组件></我的组件><br><button id="external-button">外部按钮</button>

<模板 id="我的模板"><div style="border: 1px solid; padding: 5px;"><p>一个计数器:{{ count }}</p><button @click="increaseCount">内部按钮</button>

</template>

所以当我点击内部按钮时，increaseCount() 方法被绑定到它的点击事件，所以它被调用.无法将事件绑定到外部按钮，我正在使用 jQuery 侦听其单击事件，因此我需要一些其他方式来调用 increaseCount.

编辑

这似乎有效:

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

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

解决方案

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

例如

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

var vm = new Vue({el: '#app',组件:{'我的组件':我的组件}});

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

现在，我可以在其他地方从外部访问组件

以这个小提琴为例:https://jsfiddle.net/xmqgnbu3/1/

(使用 Vue 1 的旧示例:https://jsfiddle.net/6v7y6msr/)

Let's say I have a main Vue instance that has child components. Is there a way of calling a method belonging to one of these components from outside the Vue instance entirely?

Here is an example:

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>

So when I click the internal button, the increaseCount() method is bound to its click event so it gets called. There is no way to bind the event to the external button, whose click event I am listening for with jQuery, so I'll need some other way to call increaseCount.

EDIT

It seems this works:

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

However, this is not a good solution because I am referencing the component by its index in the children array, and with many components this is unlikely to stay constant and the code is less readable.

解决方案

In the end I opted for using Vue's ref directive. This allows a component to be referenced from the parent for direct access.

E.g.

Have a compenent registered on my parent instance:

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

Render the component in template/html with a reference:

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

Now, elsewhere I can access the component externally

<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>

See this fiddle for an example: https://jsfiddle.net/xmqgnbu3/1/

(old example using Vue 1: https://jsfiddle.net/6v7y6msr/)

这篇关于从组件外部调用 Vue.js 组件方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！