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