Question

在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();
    });
}

Answer 1

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

MainComponent.vue：

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

ChildComponent.vue：

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

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

this.$emit('getInformation', dataVariable)

Answer 2

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

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

getInformation()

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

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

foo

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

2 个答案: