Vue组件之动态组件

动态组件：不同组件之间进行动态切换，通过 Vue 的元素加一个特殊的 is attribute 实现

1. 基础使用

component 的 is 属性值是组件名，就可以调用该组件

<component is="comb"></component>

<div id="app">
<component is="comb"></component>
</div><script>
var coma = {
template: '<div>aaaa</div>'
}
var comb = {
template: '<div>bbbb</div>'
}
let vm = new Vue({
el: '#app',
components: {
coma: coma,
comb: comb,
}
})
</script>

2. 动态调用组件示例

<div id="app">
<button @click="changeComponent('coma')">coma</button>
<button @click="changeComponent('comb')">comb</button>
<button @click="changeComponent('comc')">comc</button><component :is="com_name"></component>
</div><script>
var coma = {
template: '<div>aaaa</div>'
}
var comb = {
template: '<div>bbbb</div>'
}
var comc = {
template: '<div>cccc</div>'
}
let vm = new Vue({
el: '#app',
data: {
com_name: 'coma'
},
components: {
coma: coma,
comb: comb,
comc: comc,
},
methods: {
changeComponent: function(name) {
this.com_name = name
}
}
})
</script>

代码效果

Vue组件之动态组件相关推荐

动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
文章目录 Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepalive Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件 < ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
vue内置动态组件component使用详解
1 动态组件介绍 component是vue内置组件,主要作用为动态渲染组件,基本用法如下: <!-- 动态组件由 vm 实例的 `componentName` property 控制 --&g ...
vue延迟渲染组件_Vue 动态组件渲染问题分析
fire 读在最前面: 1.本文适用于有一定基础的vue开发者,需要了解基本的vue渲染流程 2.本文知识点涉及vue构造器以及选项策略合并. 渲染逻辑问题描述: Child继承自App,主程序通过 ...
Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
草图大师里创建动态组件_SketchUp动态组件教程（二）切换隐藏实例教程
按组件属性对话框内默认的顺序,依次完成所有群组模型的命名,如图2-4所示. 所有开关插座英文对应表如下:(也可用拼音字母代替,最好不用中文命名) 1. 一联开关 1Gang Switch 2. 二联开 ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
VUE 中 keep-alive 的 --是什么-- 使用场景-- 作用-- 新增属性--动态组件--理解
KBK对keep-alive的一些见解(有不对之处,尽请告知,嘻嘻) Keep-alive是什么是Vue的内置组件包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. Keep-alive的使 ...

Vue组件之动态组件

Vue组件之动态组件相关推荐

最新文章

热门文章