【学习干货の vue 进阶系列】vue 动态组件的使用

使用场景：在同一个地方，不同的状态下需要调用不同的组件，使用到了很多 v-if 、v-else-if 的时候，就需要我们的动态组件上场啦

• 首先是介绍一波动态组件的标签组成

<component v-bind:is="currentTabComponent"></component>
 或者
<component :is="currentTabComponent"></component> //注：语法糖写法

其中 component 是动态组件的标签名，currentTabComponent 是需要组件名

接下来看组件部分：

//刚开始注册组件或者创建一个组件
var home = {template:'<div>我是主页</div>'};
var user = {template:'<div>我是用户页</div>'};
//组件注册
components: {
    home,
    user,
  },
//将组件名列为一个数组
data(){
  arr:['home','user'],
  index:0
},
//定义一个计算属性
computed:{
  currentView(){
      return this.arr[this.index];
  }
},
//
method(){
  //这里加入一个方法，改变index的值即可
}