Bootstrap-Vue-table的道具可以从父组件动态设置吗？

Question

我使用了一个Bootstrap-Vue-Table (b-table)内的Vue-Component (BTableGenericComponent.vue). 顾名思义，我在其他多个组件页面中重复使用该表。在其中一个组件页面中，我想启用 stacked 桌的道具，其他的我没有。我可以以某种方式动态地传递这个道具吗？

Answer 1

在你的组件中创建一个道具 BTableGenericComponent.vue，并将其绑定到 stacked 拄着 b-table. 设置道具的默认值为 false因此，默认情况下，表格不会被堆叠。但是如果需要的话，你可以在你的父组件中添加该道具。

BTableGenericComponent.vue是一个很好的例子。

<b-table :stacked="stacked"></b-table>

<script>
{
  props: {
    stacked: {
      type: [Boolean, String],
      default: false
    }
  }
}
</script>

然后在你的父组件中，你现在可以在需要堆叠表格时使用该道具。

Parent.vue

<b-table-generic-component :stacked="true"></b-table-generic-component>

Answer 2

是的，动态设置道具可以在每个组件中工作，而不仅仅是Bootstrap-Vue-Table。

父组件

 <ChildComponent
   prop-1="Text"
   :prop-2="2"
 />

子项

<template>
  <AnotherChild v-bind="$props" />
</template>

<script>
 export default {
   props: {
    prop1: String,
    prop2: Number
   }
 }
</script>

另外，在子组件中声明每一个道具，可能不是一个好主意。相反，你可以将道具和属性结合起来。

父组件

 <ChildComponent
   prop-1="Text"
   :prop-2="2"
   attr-1="attr"
   attr-2="attr2"
 />

子项

<template>
  <AnotherChild v-bind="$props" v-bind="$attrs" />
</template>

<script>
 export default {
   props: {
    prop1: String,
    prop2: Number
   }
 }
</script>

如果你想解决你的确切问题，而不是我的答案太笼统，请随时提供一个codesandbox的例子，这样我就可以编辑它，并为你提供解决方案。