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>

使用<keep-alive>缓存

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

基本用法:

<div id="example">

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

<keep-alive>

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

</keep-alive>

</div>

条件判断

如果有多个条件性的子元素,<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

activated 和 deactivated 在 <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

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

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

<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

方式二:动态注册组件实现

 asyncComponents(templateName){

this.curNavComponents = require(`./components/${templateName}.vue`).default;

}

参考地址:

  • Vue动态组件
  • vue父组件如何动态注册子组件

以上是 vue动态子组件的实现方式 的全部内容, 来源链接: utcz.com/z/380369.html

回到顶部