javascript - 动态更改外部 Vue.js 2.x 组件的 prop 值

Question

我在我的网站中使用 BootstrapVue 中的选项卡组件，并且我想动态更改选项卡组件中的“disabled”属性。

不幸的是，这是不可能的，因为“disabled”被定义为 BootstrapVue 中的一个 prop，并且 prop 在 Vue.js 中是可以互换的，而数据属性是可以互换的。

https://bootstrap-vue.github.io/docs/components/tabs

<b-tabs>
  <b-tab title="first" active>
    I'm the first fading tab
  </b-tab>
  <b-tab title="second">
    I'm the second tab content
  </b-tab>
  <b-tab title="disabled" disabled>
    <b-card>I'm the card in tab</b-card>
  </b-tab>

我认为这个问题并不是这个 Bootstrap Tab 组件特有的，但在使用外部组件时这是一个更广泛的问题。我不想修改原始源，但我希望能够更改它的 props。

我想也许可以使用这样的东西。但这是行不通的。此外，这也不会使其他选项卡能够更改状态，因为它绑定(bind)到基于非索引的属性。

<b-tab title="second" :disabled="$parent.$parent.disabled">

有人知道如何实现这一目标吗？

Answer 1

如果你这样做

<tab-content>
    <something :disabled="disabled"></something>
</tab-content>

那么“disabled”值来自渲染选项卡内容组件的组件内部，并且不属于选项卡内容组件

你不能按照你想要的方式做到这一点。