<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<button @click="name=name=='len'?'veb':'len'">切换</button>
<!--没加keep-alive的时候veb会出发多次-->
<keep-alive>
<componnet :is="name"></componnet>
</keep-alive>
</div>
</body>
<script>
Vue.component("veb",{
created:function(){
console.log("a")
},
template:"<h1>hello</h1>"
})
Vue.component("len",{
template:"<h1>world</h1>"
})
var box=new Vue({
el:"#box",
data:{
name:"veb"
}
})
</script>
</html>
vue动态组件
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 我在Vue动态组件上的坑上重复踩了两次,一模一样的两次思考过程。 我想,这个重复思考的过程并不是偶然,说明是很有必...
- 本文写给对Vue组件了解的基础上,如果你不明白什么是Vue的组件,可以去官网看看Vue组件基础。在Vue中有一个 ...