Vue动态组件：如何从同一组件的多个实例中进行选择

Posted 2023-02-23

【中文标题】Vue动态组件：如何从同一组件的多个实例中进行选择

【英文标题】：Vue Dynamic Components: how to select from multiple instance of the same component

【发布时间】：2018-11-04 09:59:22

【问题描述】：

我有以下问题：我在项目中使用 iView 作为 UI 库，我必须从 动态组件 内的几个相同的 iView Button 组件中选择 Button , 传递给 :is 组件的 props。这是我的代码的摘录：

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

:is prop 应该传递一个组件

示例：

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

【讨论】：

是的，没错。从一开始，我就知道这一点，但想检查是否有使用动态组件的方法:)