Vue Dynamic Components: как выбрать из нескольких экземпляров одного и того же компонента - PullRequest
Новая
       31

Vue Dynamic Components: как выбрать из нескольких экземпляров одного и того же компонента

0 голосов
/ 25 мая 2018

У меня следующая проблема: я использую iView в качестве библиотеки пользовательского интерфейса в нашем проекте, и мне нужно выбрать Button из нескольких одинаковых компонентов iView Button внутри динамического компонента , чтоперейти к: это реквизит компонента.Вот выдержка из моего кода: 

  <span class="top-buttons" v-if="showTopButtons">
    <Button @click="selectAll">
      <Icon type="android-remove-circle"></Icon>
      Select All
    </Button>
    <component :is="???">
      <Button @click="moveToDrafts">
        <Icon type="android-cancel"></Icon>
        Move to Drafts
      </Button>
      <Button @click="publish">
        <Icon type="android-cancel"></Icon>
        Publish
      </Button>
      <Button @click="publish">
        <Icon type="android-cancel"></Icon>
        Publish
      </Button>
    </component>
    <Button @click="deleteTour">
      <Icon type="trash-a"></Icon>
      Delete
    </Button>
  </span>

1 Ответ

0 голосов
/ 25 мая 2018

:is реквизит должен быть передан компонент

пример: 

<template>
    <component v-bind:is="currentTabComponent"></component>
</template>

<script>
import currentTabComponent from './currentTabComponent';
export default {
  components: {
    currentTabComponent,
  },
};
</script>

В вашем случае, вероятно, более целесообразно использовать v-if вместо 

<Button @click="moveToDrafts" v-if="someCondition1">
    <Icon type="android-cancel"></Icon>
    Move to Drafts
</Button>
<Button @click="publish" v-else-if="someCondition2">
    <Icon type="android-cancel"></Icon>
    Publish
</Button>
<Button @click="publish" v-else>
    <Icon type="android-cancel"></Icon>
    Publish
</Button>
...