How to specify when a Vue Component has extra functionality?-CodePudding

I have a table component, and this table component has the ability to select attributes, however I only want this ability to be available when I need it to be, aka not every time it's rendered. How do I do this?

Functionality snippet from Component.vue to only be active when in a certain file ie Component2.vue

  <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

    <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>

CodePudding user response：

You can achieve this by using props that you pass while calling that component. That prop could be anything you need. Here is a small example with simple 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>

This is, as stated, a small and simple example. You can pass any kind of data with props. It could also be a object full of data to handle multiple conditions.