vue.js - 如何使功能仅适用于 VueJs 组件的一个渲染？

Question

我的措辞可能很糟糕，但我有一个包含表格的组件，它在两个不同的文件 File1.Vue 中使用，但它有一个功能（可选属性），为表格提供附加功能，最初包含在与它相同的文件，在表被放入它自己的组件之前。

当我将表格组件重新渲染到 Form1.vue 中时，它没有它不处于组件形式时所具有的功能。就好像添加的功能函数无法与渲染的组件交互。我对 Vue 很陌生，所以也许我解释得不好。我将把我的 Form1.vue 与非功能代码片段和我的表格组件放在下面。

form1.vue

    <template>
  <div>
    <InternalTable :participants="participants"></InternalTable>
    <b-table
        :striped="striped"
        :bordered="false"
        :data="participants"
        detailed
        class="participant-table"
        :row-class="() => 'participant-row'"
    >
      <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>
  </div>
</template>

零件：

    <template>
  <b-table :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">{{ props.row.primaryAlias.value }}</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">{{ props.row.primaryEmail.value }}</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">{{ props.row.primaryAddress.value }}</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">{{ props.row.primaryPhone.value }}</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">
          <span v-if="!props2.row.columnValues.length" class="attr-empty" >-</span>
          <b-table
              v-else
              :bordered="false"
              class="attr-table"
              :striped="true"
              :data="props2.row.columnValues"
          >
            <b-table-column field="columnName" v-slot="itemProps">
              {{ itemProps.row.value }}
            </b-table-column>
          </b-table>
        </b-table-column>
      </b-table>
    </template>
  </b-table>
</template>

<script>
import { snakeCase } from "snake-case"
import SelectableAttribute from '../groups/SelectableAttribute'


export default {
  props: {
    participants:
        {
          type: Array,
          default: []
        },
      },

  methods: {
    tableDataToDataValueCells(participant) {
      const fields = [
        { fieldName: 'companyNames', fieldClass: 'CompanyName' },
        { fieldName: 'aliases', fieldClass: 'Alias' },
        { fieldName: 'addresses', fieldClass: 'Address' },
        { fieldName: 'phones', fieldClass: 'Phone' },
        { fieldName: 'emails', fieldClass: 'Email' },
        { fieldName: 'birthdates', fieldClass: 'Birthdate' },
        { fieldName: 'customerNumbers', fieldClass: 'CustomerNumber' },
        { fieldName: 'ibans', fieldClass: 'BankAccount' },
      ];
      let result = [];

      fields.forEach(field => {
        if (participant[field.fieldName].length > 0) {
          result.push({
            attributeName: field.fieldName,
            columnName: I18n.t(`ccenter.participant.table.${snakeCase(field.fieldName)}`),
            columnValues: participant[field.fieldName],
            fieldClass: field.fieldClass,
          })
        }
      });
      return result;
    }
  }
};
</script>

标签： vue.jsvuejs2vue-component