如何指定 Vue 组件何时具有额外功能？

Question

我有一个 table 组件，这个 table 组件具有 select 属性的能力，但是我只希望在需要时可以使用此功能，也不是每次渲染时。我该怎么做？

来自 Component.vue 的功能片段仅在特定文件中才有效，即 Component2.vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<b-table-column field="columnValue" v-slot="props2" class="attr-column">
  <b-table :bordered="false" class="attr-table" :striped="true" :data="props2.row.columnValues">
    <b-table-column field="columnName" v-slot="itemProps">
      <SelectableAttribute :attr-name="props2.row.fieldClass" :attr-id="itemProps.row.id" :model-id="itemProps.row.id" model-name="NewParticipant">
        {{ itemProps.row.value }}
      </SelectableAttribute>
    </b-table-column>
  </b-table>
</b-table-column>
</b-table>

Component.vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
      <b-table :striped="striped" :bordered="false" :data="participants" detailed class="participant-table" :row-class="() => 'participant-row'">
        <b-table-column field="primaryAlias" :label="t('participant.table.primary_alias')" v-slot="props">
          <template v-if="props.row.primaryAlias">
            <SelectableAttribute attr-name="Alias" :attr-id="props.row.primaryAlias.id" :model-id="props.row.id" model-name="NewParticipant">
              {{ props.row.primaryAlias.value }}
            </SelectableAttribute>
          </template>
          <template v-else>-</template>
        </b-table-column>
    
        <b-table-column field="primaryEmail" :label="t('participant.table.primary_email')" v-slot="props">
          <template v-if="props.row.primaryEmail">
            <SelectableAttribute attr-name="Email" :attr-id="props.row.primaryEmail.id" :model-id="props.row.id" model-name="NewParticipant">
              {{ props.row.primaryEmail.value }}
            </SelectableAttribute>
          </template>
          <template v-else>-</template>
        </b-table-column>
    
        <b-table-column field="primaryAddress" :label="t('participant.table.primary_address')" v-slot="props">
          <template v-if="props.row.primaryAddress">
            <SelectableAttribute attr-name="Address" :attr-id="props.row.primaryAddress.id" :model-id="props.row.id" model-name="NewParticipant">
              {{ props.row.primaryAddress.value }}
            </SelectableAttribute>
          </template>
          <template v-else>-</template>
        </b-table-column>
    
        *<b-table-column field="primaryPhone" :label="t('participant.table.primary_phone')" v-slot="props">
          <template v-if="props.row.primaryPhone">
            <SelectableAttribute attr-name="Phone" :attr-id="props.row.primaryPhone.id" :model-id="props.row.id" model-name="NewParticipant">
              {{ props.row.primaryPhone.value }}
            </SelectableAttribute>
          </template>
          <template v-else>-</template>
        </b-table-column>*
    
        <b-table-column v-slot="props" cell-class="cell-action">
          <slot v-bind="props.row">
          </slot>
        </b-table-column>
    
        <template slot="detail" slot-scope="props">
          <b-table class="attrs-detail-container" :data="tableDataToDataValueCells(props.row)" cell-class="with-bottom-border">
            <b-table-column field="columnName" v-slot="props">
              <b>{{ props.row.columnName }}</b>
            </b-table-column>
    
            <b-table-column field="columnValue" v-slot="props2" class="attr-column">
              <b-table :bordered="false" class="attr-table" :striped="true" :data="props2.row.columnValues">
                <b-table-column field="columnName" v-slot="itemProps">
                  <SelectableAttribute
                      :attr-name="props2.row.fieldClass"
                      :attr-id="itemProps.row.id"
                      :model-id="itemProps.row.id"
                      model-name="NewParticipant"
                  >
                    {{ itemProps.row.value }}
                  </SelectableAttribute>
                </b-table-column>
              </b-table>
            </b-table-column>
          </b-table>
        </template>
      </b-table>
    </template>

Answer 1

您可以通过使用在调用该组件时传递的 props 来实现此目的。 prop 可能是您需要的任何内容。这是一个简单的小例子 true/false prop:

// Set the prop in your called component, in this case a boolean
props: {
    myBoolean: Boolean
  }

// Passing the prop from your parent to the component, where it has to be a property, in this case called myBooleanFromParent

<my-component :myBoolean="myBooleanFromParent"></my-component>

// In your component your template changes according to the passed prop from your parent
<template>
  <div>
    <div v-if="myBoolean">
      If myBoolean is true
    </div>
    <div v-else>
      Else, so if myBoolean is false
    </div>
  </div>
</template>

如前所述，这是一个小而简单的示例。您可以使用道具传递任何类型的数据。它也可以是 object 充满数据以处理多种情况。

如何指定 Vue 组件何时具有额外功能？

How to specify when a Vue Component has extra functionality?

vue.js

vue-component

vuejs2