有没有办法从VueJS中的父级触发组件方法?

Posted

技术标签:

【中文标题】有没有办法从VueJS中的父级触发组件方法?【英文标题】:Is there any way to trigger component method from parent in VueJS? 【发布时间】:2017-09-15 13:56:53 【问题描述】:

我一直在搜索信息,并且只找到了一种从子组件发出事件的方法,然后可以在父组件中监听这些事件。有没有办法从父组件调用子方法?

【问题讨论】:

【参考方案1】:

是的,只需在 children 数组中找到您的组件,或者通过 ref 属性获取它,然后调用方法 :) ref doc

假设您的子组件具有方法 x。 根据文档:

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var child = this.$refs.profile;
child.x();

【讨论】:

此处相同“无法读取未定义的属性“配置文件”。 ref 属性适用于原生元素,但不适用于自定义组件。 明确一点:$refs 属性下的组件在创建相应组件后可用(我认为这很明显:)),因此您可以在挂载的处理程序中使用它。跨度> 这是一种不好的做法,因为它破坏了组件中的推荐数据和事件流。 但是如果您使用的是第三方组件并且没有任何公开的 API 怎么办?这可能是不好的做法,但有时你别无选择...... 我同意@zedee:在包装第三方组件时非常有用。我正在用旧库替换新库并创建自定义包装器可以避免重复,但如果不从父级调用方法,这是不可能的。【参考方案2】:

我认为一个很好的模式是从父组件发出一个事件并在子组件中使用Event Bus监听它。

那就是:

在 main.js 中

export const bus = new Vue()

在 Parent.vue 中:

import bus from 'path/to/main'

// Where you wanna call the child's method:
bus.$emit('customEventName', optionalParameter)

在 Child.vue 中:

import bus from 'path/to/main'

// Add this to the mounted() method in your component options object:
bus.$on('customEventName', this.methodYouWannaCall)

【讨论】:

您能详细说明一下吗?我不明白我们在这里做什么以及为什么。 @tatsu 它创建了一个额外的 Vue 实例,并使用 Vue 实例提供的方法来实现事件总线。 只需将 ref 属性传递给组件并使用它来调用其方法&lt;component ref="componentRef"&gt; ... this.$refs.componentRef.theMethod() 您提供的“事件总线”文档的链接已损坏,该概念似乎已停止使用 vuex。 另见:tkacz.pro/vue-js-why-event-bus-is-bad-idea【参考方案3】:

这是一个简单的

this.$children[indexOfComponent].childsMethodName();

【讨论】:

代码中不需要“$children[indexOfComponent]”。只需将“ref='someChild”添加到您的子组件并通过“this.$refs.someChild”在您的父组件中访问它。

以上是关于有没有办法从VueJS中的父级触发组件方法?的主要内容,如果未能解决你的问题,请参考以下文章

使用 useRef 从 Reactjs 中的父级调用子函数

如何在vuejs中的父组件中单击按钮时调用子组件

Quasar(vue)中嵌套在路由器中的子级中的父级触发方法

修改子组件中的选择值后触发函数 - VueJs

如何从 TypeScript 文件中的父级获取子组件变量和函数

从 VueJS 的父组件中引用子组件的索引