Vue.js子组件访问父组件tabs_value返回undefined，求解决

问题原因 #

你的Run组件嵌套在Vuetify的v-tab-item组件内部，this.$parent指向的是v-tab-item的组件实例，而非你写的父组件，所以直接访问this.$parent.tabs_value会得到undefined。

解决方案 #

方案1：通过Props传递（推荐）

这是Vue组件通信的标准方式，依赖关系清晰，维护性强。

1. 修改父组件中Run组件的调用，传入tabs_value：

<Run :reports="reports" :tabs_value="tabs_value" ref="run_reports" />

2. 在子组件run.vue中声明并使用该props：

export default {
  props: ['reports', 'tabs_value'],
  // ... 其他代码
  methods: {
    run(report) {
      console.log(this.tabs_value); // 可正确获取父组件的tabs_value
    }
  }
}

方案2：多级$parent访问（不推荐）

仅适合临时测试，组件层级变化时会直接失效：

methods: {
  run(report) {
    // 跳过v-tab-item，访问上层的父组件
    console.log(this.$parent.$parent.tabs_value);
  }
}

方案3：Vuex状态管理（复杂场景适用）

如果多个组件需要共享tabs_value这类状态，建议用Vuex统一管理，彻底消除组件间的直接依赖。

内容的提问来源于stack exchange，提问作者user12763413