码迷,mamicode.com
首页 > 其他好文 > 详细

动态地绑定到它的 is 特性,可以实现动态组件

时间:2017-12-07 13:17:23      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:它的   arch   code   对象   vue   col   nbsp   动态   div   

前面的话

  让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件

概述

  通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>
<script>
var home = {template:‘<div>我是主页</div>‘};
var post = {template:‘<div>我是提交页</div>‘};
var archive = {template:‘<div>我是存档页</div>‘};
new Vue({
  el: ‘#example‘,
  components: {
    home,
    post,
    archive,
  },
  data:{
    index:0,
    arr:[‘home‘,‘post‘,‘archive‘],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})
</script>

也可以直接绑定到组件对象上

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>
<script>
new Vue({
  el: ‘#example‘,
  data:{
    index:0,
    arr:[
      {template:`<div>我是主页</div>`},
      {template:`<div>我是提交页</div>`},
      {template:`<div>我是存档页</div>`}
    ],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})
</script>

 

动态地绑定到它的 is 特性,可以实现动态组件

标签:它的   arch   code   对象   vue   col   nbsp   动态   div   

原文地址:http://www.cnblogs.com/moxiaowohuwei/p/7998490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!