当子组件功能完成时,Vue调用父组件功能

时间:2019-09-04 06:38:32

标签: javascript vue.js

在Vue中,我有一个主要组件,该组件包含一个子组件,该子组件通过按钮加载到页面上,并且该按钮触发saveTaskComment()。这完美地工作了,我可以进入子组件功能的.finally部分。但是,当它完成并到达该点时,我想调用父组件以再次调用方法getInformation。我现在拥有的方式无法正常工作,因此我认为$ parent在这种情况下不正确。

我该怎么做才能使childComponent中的方法调用原始函数

mainComponent

methods: {
    getInformation() {
        this.$root.$emit('fetchCommentsEvent');
    },
}

childComponent

saveTaskComment() {

/*function completes and gets to this step fine*/

    .finally(() => {
        this.$parent.getInformation();
    });
}

2 个答案:

答案 0 :(得分:1)

要从子组件中发出某种方法,必须将该方法传递给子组件。

MainComponent.vue:

<child-comp @getInformation="getInformation" />

ChildComponent.vue:

.finally(() => {
    this.$emit('getInformation')
});

如果要向父方法传递一些数据,可以通过

this.$emit('getInformation', dataVariable)

答案 1 :(得分:1)

我在CodeSandbox上做了一个样本,以说明我在评论中所说的话。

这里要抓住的重点是,当您将“孩子的”模板插入“父母的”模板中时,您想听某些事件并在事件发出时致电WebView

getInformation()

要将此<Child @foo="getInformation()">This is child.</Child> 事件发回给父事件,只需在Child组件中执行foo

由于我们正在监听this.$emit(eventName, optionalData)事件,因此您希望像这样发出它。

foo