vue中一个组件调用另一个组件的方法(函数)
vue组件调用外部组件的方法并传参过去
·
vue中一个组件调用另一个组件的方法(函数)
在工作中遇到一个问题,页面整体框架是一个侧边菜单栏,点击选项后会生成一个类似于浏览器的标签页,但是有一些路由需要在页面上点击,也要生成一个标签页,这就需要views的组件来调用侧边栏组件的添加标签的方法,同时还需要将路由为这个方法传过去。
一开始我尝试将侧边菜单栏组件引入页面组件,再通过"引入组件名.metheds.引入组件中的方法"的方式来调用方法并传值,但是经调试后发现值根本没有传过去,在大佬的指导下我学会了一种别的方式来调用并成功实现
这是侧边菜单栏添加标签的方法,需要被外部组件调用:
<script>
export default {
provide() {
return {
moduleclicked: this.moduleclicked,
};
},
methods: {
moduleclicked(routePath) {
let routeDef = this.$router.match(routePath);
let componentInfo =
routeDef.matched[routeDef.matched.length - 1].components.default;
let componentProps = routeDef.matched[routeDef.matched.length - 1].props.default;
componentProps =
componentProps === true
? componentProps
: typeof componentProps == "object"
? componentProps
: typeof componentProps == "function"
? componentProps(this.$route)
: "";
let module = {};
for (let resItem of this.auth.instance.getPermission().resList.values()) {
if (resItem.resPvalue == routePath) {
module = resItem;
break;
}
}
this.addTab(routeDef.meta.title, routePath, componentInfo, componentProps);
},
},
};
</script>
这是页面的组件的调用:
<script>
export default {
inject:['moduleclicked'],
methods: {
xndgxTz(){
this.moduleclicked('/project/virtualstart');
},
gscplxTz(){
this.moduleclicked('/project/productregistration');
},
gsnblxTz(){
this.moduleclicked('/project/nbxmdjd');
}
},
};
</script>
通过在被调用组件中添加provide(),在里面返回需要传出去的方法名称
provide() { //注意,provide()与method、data、created这些同级
return {
moduleclicked: this.moduleclicked, //前面的是要传出去的方法名,后面是本地的方法
};
},
然后在页面组件中使用inject[‘传入方法名’]
inject:['moduleclicked'],//注意,inject与method、data、created这些同级
在调用时只需要
this.moudleclicked("/project/index"); //通过this.传入方法名(‘需要传递的参数’)即可传参调用
更多推荐
已为社区贡献3条内容
所有评论(0)