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

javascript vue.js

2022-08-29 23:53:35

假设我有一个包含子组件的主 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>

因此，当我单击内部按钮时，该方法绑定到其单击事件，以便调用它。没有办法将事件绑定到外部按钮，我正在使用jQuery侦听其单击事件，因此我需要其他方法来调用。increaseCount()increaseCount

编辑

这似乎有效：

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

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

答案 1

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

例如：

在我的父实例上注册一个补偿：

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/)

编辑 Vue3 - Composition API

子组件必须具有要在父组件中使用的函数，否则该函数对父组件不可用。returnsetup

注意：doc 不是附属的，因为它默认为模板提供所有函数和变量。<sript setup>

答案 2

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

将引用添加到子组件：

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

将点击事件添加到父级：

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

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <my-component ref="childref"></my-component>
  <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 2px;" ref="childref">
    <p>A counter: {{ count }}</p>
    <button @click="increaseCount">Internal Button</button>
  </div>
</template>