Vue中父组件如何更新子组件b-tabs的选中值

• 语法错误：Vue组件的props配置要求传入字符串格式的属性名数组，你当前写的props: [indexVal]属于无效写法，未加引号的indexVal会被识别为未定义变量，Vue无法正常接收父组件传入的参数。另外父组件中的indexVal是自身维护的状态，不需要声明在props中，属于多余的错误配置。
• 同步逻辑缺失：子组件中tabIndex: this.indexVal的赋值逻辑仅在子组件首次初始化时执行1次，后续父组件修改indexVal时，子组件本地的data属性不会自动更新，自然无法触发b-tabs的选中状态变更。
• 边界问题：你当前子组件仅渲染了2个b-tab，对应合法索引为0和1，示例中updateVal方法将值设为2时，即使同步逻辑正常也无法匹配到对应tab，不会出现选中效果。

1. 修正父组件代码 #

删除父组件中错误的props声明，保留自身的indexVal状态即可，推荐配合.sync修饰符实现双向状态同步：

<template>
  <!-- 加.sync修饰符，接收子组件的更新事件自动同步状态 -->
  <child :index-val.sync="indexVal"></child>
</template>

<script>
export default {
  data() {
    return {
      indexVal: 0,
    }
  },
  methods: {
    updateVal() {
      // 注意：仅2个tab时合法索引为0、1，这里改为1测试即可看到效果
      this.indexVal = 1
    },
  },
}
</script>

2. 修正子组件代码 #

两种实现方案二选一即可，都不会触发prop修改的官方警告，完全符合Vue单向数据流规范：

方案1：本地data + watch监听（逻辑直观） #

修正props写法，新增监听器同步父组件的参数变化，可选增加本地选中值的事件回传，保证父子状态一致：

<template>
  <div>
    <b-card no-body>
      <b-tabs v-model="tabIndex" small card>
        <b-tab title="tab1">tab1</b-tab>
        <b-tab title="tab2">tab2</b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>

<script>
export default {
  props: ['indexVal'], // 修正props写法，属性名用字符串包裹
  data() {
    return {
      tabIndex: this.indexVal,
    }
  },
  watch: {
    // 父组件更新prop时，同步修改本地绑定值
    indexVal(newVal) {
      this.tabIndex = newVal
    },
    // 用户手动切tab时，通知父组件同步状态
    tabIndex(newVal) {
      this.$emit('update:indexVal', newVal)
    }
  },
}
</script>

方案2：computed 读写拦截（代码更简洁） #

不需要单独维护本地data和多个watch，通过计算属性的get/set直接代理prop的读写，逻辑更聚合：

<template>
  <div>
    <b-card no-body>
      <b-tabs v-model="tabIndex" small card>
        <b-tab title="tab1">tab1</b-tab>
        <b-tab title="tab2">tab2</b-tab>
      </b-tabs>
    </b-card>
  </div>
</template>

<script>
export default {
  props: ['indexVal'],
  computed: {
    tabIndex: {
      // 读取时直接返回父组件传入的prop值
      get() {
        return this.indexVal
      },
      // 修改时通过事件通知父组件更新状态，不直接修改prop
      set(newVal) {
        this.$emit('update:indexVal', newVal)
      }
    }
  }
}
</script>

两种方案的核心逻辑都是不直接修改prop值：子组件只触发更新事件，状态修改统一由父组件完成，从根源上避免Vue的prop修改警告，同时保证父子状态完全同步。

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