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

时间:2017-04-19 11:07:09

标签: vue.js

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

3 个答案:

答案 0 :(得分:61)

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

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

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

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

答案 1 :(得分:12)

我认为一个好的模式是从父组件发出事件并使用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)

答案 2 :(得分:-4)

这是一个简单的

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