从组件外部调用 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() 方法被绑定到它的点击事件，所以它被调用。无法将事件绑定到外部按钮，我正在使用 jQuery 监听其单击事件，因此我需要一些其他方法来调用 increaseCount 。

编辑

似乎这有效：

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

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

原文由 harryg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 编辑 - 组合 API

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

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

原文由 harryg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您将 Vue 3 与 <script setup> 糖一起使用，请注意组件的内部绑定是关闭的（从组件外部不可见），您必须使用 defineExpose （请参阅 docs ）使它们从外部可见。像这样的东西：

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

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

原文由 dotNET 发布，翻译遵循 CC BY-SA 4.0 许可协议