javascript - Vue动态组件:如何从同一组件的多个实例中进行选择
问题描述
我有以下问题:我在我们的项目中使用 iView 作为 UI 库,我必须从动态组件中的几个相同的 iView Button 组件中选择Button,传递给 :is 组件的内容是什么。这是我的代码的摘录:
<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>
解决方案
: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>
推荐阅读
- codeigniter - Codeigniter - 数据表中的 $sOrder 和 $sLimit
- ssl - 证书如何验证网站所有者的身份?
- c# - 如何使用按钮获取选定的行 ID 并发送 SQL 查询以更新数据库
- python - 将键值对划分为 n 组总和 y 或更小的算法
- javascript - 文档未定义 Node.js
- swift - 具有自定义类型的 Swift Enum 隐式成员表达式
- spring-mvc - 如何使用 Spring Security 在集群环境中维护用户会话
- c# - 在 C# .Net Windows 窗体中更改标签颜色
- python - 使单个字符串成为列表的一部分
- java - 如何将圆角边框应用于表格(单页/多页)?