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

IT技术 javascript vue.js
2021-02-12 20:18:39

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

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

6个回答

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

例如

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

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

使用引用在模板/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/）

如果您尝试将视图组件集成到现有页面中，则可能会出现这种情况。有时，与其完全重新设计页面，不如逐步添加其他功能。
2021-03-20 20:18:39
那是因为你可能还没有定义它。看看链接的小提琴。
2021-03-22 20:18:39
关于什么是 hack 与什么是“正常”编码有如此官方的定义，但与其将这种方法称为 hack（或寻找一种“不太hacky”的方式来实现相同的事情），不如问问您为什么需要这样做这。在许多情况下，使用 Vue 的事件系统来触发外部组件行为可能更优雅，或者甚至询问您为什么要从外部触发组件。
2021-03-25 20:18:39
我不得不使用这个。: this.$refs.foo.doSomething();
2021-04-04 20:18:39
如果您使用的是 webpack，那么vm由于它对module进行作用域的方式，您将无法访问。你可以window.app = vm在你的main.js. 来源：forum.vuejs.org/t/how-to-access-vue-from-chrome-console/3606
2021-04-09 20:18:39

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

将 ref 添加到子组件：

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

迄今为止最干净的解决方案。
2021-03-31 20:18:39
您可以使用 this : 从父组件访问 ref this.$refs.childref，例如使用它来制作通用警报组件
2021-04-01 20:18:39
很好的答案。我只是要编辑 html 以使其在垂直方向上更小一些。目前，当我运行它时，我只能看到“内部按钮”，这可能会令人困惑。
2021-04-04 20:18:39

对于 Vue2，这适用：

var bus = new Vue()

// 在组件 A 的方法中

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

// 在组件 B 的创建钩子中

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

  // ...
})

有关Vue 文档，请参见此处。而在这里是如何设置这个事件总线准确详细。

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

请参阅以下 Thomas 关于 Vue 3 的评论。

在 vue 3 中不推荐使用new Vue()作为替代方法，请遵循此问题
2021-03-22 20:18:39
不推荐使用事件总线模式（至少在 vue 2/3 中），这就是它已从文档中删除的原因。有关更多信息，您可以从此处的图片中阅读此内容或相同内容- 答案由 Skittle（主持人，Vue 不和谐频道上的 MVP）提供。“很久以前从 Vue 2 文档中删除了对事件总线的引用，我们最近在 Vue 3 文档中添加了一些东西来积极阻止它”
2021-03-29 20:18:39
又短又甜！如果您不喜欢全局bus变量，您可以更进一步，使用props将总线注入到您的组件中。我对 vue 比较陌生，所以我不能向你保证这是惯用的。
2021-04-01 20:18:39

你可以使用Vue事件系统

vm.$broadcast('event-name', args)

和

 vm.$on('event-name', function())

这是小提琴：http : //jsfiddle.net/hfalucas/wc1gg5v4/59/

@GusDeCooL 该示例已被编辑。并不是在 Vuejs 2.0 之后使用的一些方法已被弃用
2021-03-25 20:18:39
如果只有 1 个组件实例，效果很好，但如果有很多实例，使用 $refs.component.method() 效果更好
2021-04-01 20:18:39

已接受答案的略有不同（更简单）的版本：

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

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

使用引用在模板/html 中呈现组件：

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

访问组件方法：

<script>
    this.$refs.foo.doSomething();
</script>
其它你可能感兴趣的问题
上一篇jQuery - 动态创建隐藏的表单元素 下一篇在 Chrome 调试器中编辑