BootstrapVue用.sync传prop后子组件绑定v-model报修改prop错误如何解决

你出现报错的核心原因是违反了Vue的单向数据流规则：父组件传递给子组件的props仅允许子组件读取，不允许直接修改。
你直接将props中的visible绑定到了<b-collapse>的v-model上，而v-model本质是双向绑定语法糖，会在状态变化时直接修改绑定的变量，也就触发了「不可直接修改prop」的报错。

关于仅首次加载报错、后续可正常使用的现象，原因是<b-collapse>在首次挂载初始化时，会主动触发一次绑定值的同步操作，这时候直接修改了props所以抛出错误；后续你父组件使用了.sync修饰符，会监听子组件的update:visible事件更新父级的源数据，状态通过响应式流同步到子组件，看起来就可以正常使用，但本质错误写法并未修正，仍存在状态不一致的隐患。

另外你代码中的v-model="visibile"存在拼写错误，正确拼写为visible，这也可能是偶现异常的诱因。

方案1：使用计算属性做中转（推荐） #

在子组件内声明一个带get/set的计算属性，读取时返回props的值，修改时触发.sync对应的更新事件：

// Accordian 子组件JS部分
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    collapseStatus: {
      get() {
        return this.visible
      },
      set(newVal) {
        this.$emit('update:visible', newVal)
      }
    }
  }
}

模板中绑定该计算属性即可：

<b-collapse v-model="collapseStatus" />

方案2：拆分v-model手动处理事件 #

直接拆分<b-collapse>的v-model为属性绑定和事件监听，不需要额外声明计算属性：

<b-collapse :visible="visible" @input="$emit('update:visible', $event)" />

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