Vue动态组件:如何从同一组件的多个实例中进行选择
Posted
技术标签:
【中文标题】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>
【讨论】:
是的,没错。从一开始,我就知道这一点,但想检查是否有使用动态组件的方法:)以上是关于Vue动态组件:如何从同一组件的多个实例中进行选择的主要内容,如果未能解决你的问题,请参考以下文章