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.传入方法名(‘需要传递的参数’)即可传参调用