Vue动态组件
2023-09-11 14:20:08 时间
- 动态组件就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。
- 在挂载点使用 component 标签,然后使用 is =“组件名”,它会自动去找匹配的组件名,如果有,则显示
通过使用保留的 <component>
元素,动态地绑定到它的 is
特性,可以实现动态组件
<div id="example"> <button @click="change">切换页面</button> <keep-alive> <component :is="currentView"></component> </keep-alive> </div> <script> new Vue({ el: '#example', data:{ index:0, arr:[ {template:`<div>我是主页</div>`}, {template:`<div>我是提交页</div>`}, {template:`<div>我是存档页</div>`} ], }, computed:{ currentView(){ return this.arr[this.index]; } }, methods:{ change(){ let len = this.arr.length; this.index = (++this.index)% len; } } }) </script>
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- [转] vue自定义组件中的v-model简单解释
- [转] vue从入门到进阶:组件Component详解(六)
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- 31 Vue组件中Slot插槽的使用1
- 【Vue】单文件的组件(.vue)代码实例
- vue项目.eslintrc格式化
- vue基础篇---vue组件《2》
- vue-class-component 以class的模式写vue组件
- Vue - 高效稳定的颜色选择器组件(支持鼠标拖动选择与手动输入16进制、rgb颜色值)
- Vue - 满意度调查评价功能,表情图片打分评分组件(非星星评分组件,类似抖音商品满意度好评、中评、差评评价功能)代码干净整洁注释详细无 BUG,无任何第三方插件依赖,完整功能实例源码插件
- Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程
- vue 试图改变子组件props 属性值时,控制台报错解决方案
- [转]Vue CLI 3搭建vue+vuex 最全分析
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue 关于数组和对象的更新
- 解析Nuxt.js Vue服务端渲染摸索
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue常用
- Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue
- vue基础 Vue.extend
- vue中全局组件与局部组件的注册,以及动态绑定props值
- 怎么在Vue中使用axios组件
- Vue学习第36天——PC端和移动端常用的Vue UI组件库
- vue组件参数校验
- vue-cli4.5 创建项目