- 什么是动态组件:
就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。
- 动态切换:
(:is后面的是对应的组件名,必须一致)
在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;
改变挂载的组件,只需要修改is指令的值即可
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<style type="text/css">
#app{
width: 20%;
margin: 200px auto;
border: 1px solid #ccc;
line-height: 30px;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<button href="#" @click="cha">显示下一个组件</button>
<!-- 根据:is属性指定的组件名称,把对应的组件渲染到component标签所在的位置。 -->
<component v-bind:is="liststr"></component>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
// 定义需要的四个组件
const zhuye={
template:'<h1>主页信息</h1>'
}
const keji={
template:'<h1>科技信息</h1>'
}
const caijing={
template:'<h1>财经信息</h1>'
}
const yule={
template:'<h1>娱乐信息</h1>'
}
//将这四个组件祖册为vm的私有组件
var vm= new Vue({
el:'#app',
data:{
list:['zhuye','keji','caijing','yule'],
liststr:'zhuye'
},
components:{
zhuye,
keji,
caijing,
yule
},
methods:{
cha:function(){
const currentindex=this.list.indexOf(this.liststr)
if(currentindex<3){
this.liststr=this.list[currentindex+1]
}else{
this.liststr=this.list[0]
}
}
}
})
</script>
</body>
</html>
实现的效果:
别看现在只有几个字在变化,思维拓展一下,如果这组件的内容不只是这一个标签呢?而是一大堆的标签,也就是模板字符串呢?那就厉害了,这意味着在不刷新全局的情况下,可以进行大量的局部渲染!