Vue动态组件

vue

前面的话

  让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍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>

缓存

  <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中

【基础用法】

<div id="example">

<button @click="change">切换页面</button>

<keep-alive>

<component :is="currentView"></component>

</keep-alive>

</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(){

let len = this.arr.length;

this.index = (++this.index)% len;

}

}

})

</script>

【条件判断】

  如果有多个条件性的子元素,<keep-alive> 要求同时只有一个子元素被渲染

<div id="example">

<button @click="change">切换页面</button>

<keep-alive>

<home v-if="index===0"></home>

<posts v-else-if="index===1"></posts>

<archive v-else></archive>

</keep-alive>

</div>

<script>

new Vue({

el: '#example',

components:{

home:{template:`<div>我是主页</div>`},

posts:{template:`<div>我是提交页</div>`},

archive:{template:`<div>我是存档页</div>`},

},

data:{

index:0,

},

methods:{

change(){

let len = Object.keys(this.$options.components).length;

this.index = (++this.index)%len;

}

}

})

</script>

activated 和 deactivated】 

  activateddeactivated 在 <keep-alive> 树内的所有嵌套组件中触发

<div id="example">

<button @click="change">切换页面</button>

<keep-alive>

<component :is="currentView" @pass-data="getData"></component>

</keep-alive>

<p>{{msg}}</p>

</div>

<script>

new Vue({

el: '#example',

data:{

index:0,

msg:'',

arr:[

{

template:`<div>我是主页</div>`,

activated(){

this.$emit('pass-data','主页被添加');

},

deactivated(){

this.$emit('pass-data','主页被移除');

},

},

{template:`<div>我是提交页</div>`},

{template:`<div>我是存档页</div>`}

],

},

computed:{

currentView(){

return this.arr[this.index];

}

},

methods:{

change(){

var len = this.arr.length;

this.index = (++this.index)% len;

},

getData(value){

this.msg = value;

setTimeout(()=>{

this.msg = '';

},500)

}

}

})

</script>

include和exclude

  includeexclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

<!-- 逗号分隔字符串 -->

<keep-alive include="a,b">

<component :is="view"></component>

</keep-alive>

<!-- 正则表达式 (使用 v-bind) -->

<keep-alive :include="/a|b/">

<component :is="view"></component>

</keep-alive>

<!-- Array (use v-bind) -->

<keep-alive :include="['a', 'b']">

<component :is="view"></component>

</keep-alive>

  匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配

  <keep-alive include="home,archive">

<component :is="currentView"></component>

</keep-alive>

  上面的代码,表示只缓存home和archive,不缓存posts

<div id="example">

<button @click="change">切换页面</button>

<keep-alive include="home,archive">

<component :is="currentView"></component>

</keep-alive>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

new Vue({

el: '#example',

data:{

index:0,

arr:[

{name:'home',template:`<div>我是主页</div>`},

{name:'posts',template:`<div>我是提交页</div>`},

{name:'archive',template:`<div>我是存档页</div>`}

],

},

computed:{

currentView(){

return this.arr[this.index];

}

},

methods:{

change(){

var len = this.arr.length;

this.index = (++this.index)% len;

},

}

})

</script>

以上是 Vue动态组件 的全部内容, 来源链接: utcz.com/z/379551.html

回到顶部