十四、引用模板和动态组件
2018-03-01 本文已影响0人
飞奔的小白
1.引用模板
将组件的内容放到模板<template>中并引用。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引用模板</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
<my-hello></my-hello>
</div>
<template id="wbs">
<!-- template标签内部必须有且只有一个根元素 -->
<div>
<h3>{{msg}}</h3>
<ul>
<li v-for='value in arr'>{{value}}</li>
</ul>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#itany',
components:{
'my-hello':{
name:'mingzin' ,//指定组件的名称，默认为标签名，可以不设置的
template:'#wbs',
data(){
return {
msg:'欢迎',
arr:['top1','top2','top3']
}
}
},
}
})
</script>
</body>
</html>
5.动态组件
<component :is="">组件
多个组件使用同一个挂载点，然后动态的在它们之间切
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
<button @click="flag='my-hello'">显示hello组件</button>
<button @click="flag='my-world'">显示world组件</button>
<div>
<!-- 使用keep-alive组件缓存非活动的组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建 -->
<keep-alive>
<component :is="flag"></component>
</keep-alive>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#itany',
data:{
flag:'my-hello'
},
components:{
'my-hello':{
template:'<h3>我是hello组件:{{x}}</h3>',
data(){
return {
x:Math.random()
}
}
},
'my-world':{
template:'<h3>我是world组件:{{y}}</h3>',
data(){
return {
y:Math.random()
}
}
}
}
})
</script>
</html>
