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

【问题标题】：Dynamically changing a prop value for an external Vue.js 2.x component动态更改外部 Vue.js 2.x 组件的 prop 值
【发布时间】：2017-11-14 20:12:12
【问题描述】：

我在我的站点中使用 BootstrapVue 中的 Tabs 组件，我想动态更改选项卡组件中的“禁用”属性。

不幸的是，这是不可能的，因为“禁用”被定义为 BootstrapVue 中的一个道具，而一个道具在 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 组件，但在使用外部组件时它是一个更广泛的问题。我不想修改原始来源，但我希望能够更改它的道具。

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

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

有人知道如何做到这一点吗？

【问题讨论】：

为什么要使用$parent.$parent.disabled？你在渲染标签的组件的 data() 中没有 disabled 属性吗？
我也不明白这个问题。看看我制作的简单小提琴并告诉我是否还有更多内容：jsfiddle.net/eacc6jpq
有趣。无论如何，我的方法与jsfiddle.net/kxfzr9so/1 更相关，我使用自己的组件，因为我的所有选项卡都需要它们下方的按钮。在这种情况下我简化了。在我自己的项目中，我使用 *.Vue 组件作为模板，而不是通过它的属性来定义它。在本地我得到一个“属性或方法“禁用”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。“错误。
那么你应该使用道具和事件来代替。
恐怕我必须对 BootstrapVue 组件进行更改，因为它缺少满足我需要的事件。我不确定

标签： javascript vue.js components

【解决方案1】：

如果你这样做

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

那么“disabled”值来自您渲染标签内容组件的组件内部，并且不属于标签内容组件

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

【讨论】：

那是我害怕的。所以唯一的解决方案是分叉 BootstrapVue 以便我可以满足我的需求？嗯……