bootstrap-vue-tables 的 props 可以从父组件动态设置吗？答案

【问题标题】：Can props for bootstrap-vue-tables be set dynamically from parent components?bootstrap-vue-tables 的 props 可以从父组件动态设置吗？
【发布时间】：2020-09-21 22:28:07
【问题描述】：

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

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

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

BTableGenericComponent.vue

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

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

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

父.vue

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

【讨论】：

【解决方案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>

如果您想解决您确切的问题，而我的回答不会太笼统，请随时提供代码框示例，以便我对其进行编辑并为您提供解决方案。

【讨论】：