好资源导航 » 文章资讯 » Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

2023-09-16 14:55:05 74

有时候因为布局问题，需要子组件把数据传给父组件，并执行父级的某个方法，不多说上代码：

子组件：



exportdefault{
methods:{
goToFatherDetail(itemId){
//this.$parent.$router.push('goToDetail');
console.log('子组件方法走了'+itemId);
this.$emit('refreshbizlines',itemId);/*itemId就是子要传的数据-这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/
}
}
};

父组件：



exportdefault{
methods:{
goToDetail(itemId){
console.log('父组件走你：'+itemId);
}
}
};

父组件用v-on来做个监测的函数来检测，最终生成的代码是类似

on:{
"refreshbizlines":function($event){
_vm.goToDetail(123)
}
}

所以原理就是子组件访问父组件的检测函数refreshbizlines，访问了，则执行refreshbizline下面的函数

goToDetail--也就是父组件的

goToDetail函数

注意父组件的

v-on:refreshbizlines="goToDetail"

一定要放在你父组件调用子组件的模块名上。

总结

以上所述是小编给大家介绍的Vuejs2.0子组件访问/调用父组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

热门推荐

随机推荐