vue-动态组件(:is=“组件名“)
通过使用保留的<component>元素,动态地绑定到它的is特性,我们让多个组件可以使用同一个挂载点,并动态切换。根据v-bind:is="组件名" 中的组件名去自动匹配组件 也是是一个组件对象,如果匹配不到则不显示。改变挂载的组件,只需要修改is指令的值即可。father.vue<template><div><h2>动态组件</h2>
通过使用保留的 <component>
元素,动态地绑定到它的 is
特性,我们让多个组件可以使用同一个挂载点,并动态切换不同的组件。根据 v-bind:is="组件名" 中的组件名去自动匹配组件 也是一个组件对象,如果匹配不到则不显示。
也可以用做不改变路由的情况下切换不同的页面/组件。
改变挂载的组件,只需要修改is指令的值即可。不会保存组件的状态(即重新加载这个组件)
father.vue
<template>
<div>
<h2>动态组件</h2>
<button type="button" @click="viewDyn1">组件1</button>
<button type="button" @click="viewDyn2">组件2</button>
<component :is="viewCom"></component>
</div>
</template>
<script>
import dyn1 from "./dyn1";
import dyn2 from "./dyn2";
export default {
components: {
dyn1,
dyn2
},
data() {
return {
viewCom: "dyn1"
};
},
methods: {
viewDyn1() {
// 更改:is的属性值
this.viewCom = "dyn1";
},
viewDyn2() {
this.viewCom = "dyn2";
console.log(this.$children)
}
}
};
</script>
dyn1.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
name: "dyn1",
data() {
return {
msg: "组件1"
};
}
};
</script>
dyn2.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
name: "dyn2",
data() {
return {
msg: "组件2"
};
}
};
</script>
#keep-alive 缓存
<keep-alive>
包裹动态组件时,会想保持这些组件的状态,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
动态切换掉的组件(非当前显示的组件)是被移除掉了,如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive
指令参数:
<keep-alive>
<component :is="viewCom"></component>
</keep-alive>
说明:
初始情况下,vm.$children属性中只有一个元素(dyn1组件),
点击按钮切换后,vm.$children属性中有两个元素(两个子组件都保留在内存中),
之后无论如何切换,将一直保持有两个元素。
activated
和 deactivated
这两个生命周期钩子函数将会被对应执行,只有使用<keep-alive>
缓存子组件才存在这两个钩子函数。
可以延迟执行当前的组件。
具体用法来说,activate是和template、data等属性平级的一个属性,形式是一个函数,函数里默认有一个参数,而这个参数是一个函数,执行这个函数时,才会切换组件。
dyn2.vue
<template>
<div>{{msg}} --- {{hello}}</div>
</template>
<script>
export default {
name: "dyn2",
data() {
return {
msg: "组件2",
hello: ""
};
},
activated(done) {
//执行这个参数时,才会切换组件
console.log("组件被添加");
// var self = this;
var startTime = new Date().getTime(); // get the current time
//两秒后执行
while (new Date().getTime() < startTime + 2000) {
this.hello = "我是延迟后的内容";
}
},
deactivated() {
console.log("组件被移除");
this.$emit('passData', "组件被移除");
}
};
</script>
可用如上所示代码添加添加这2个生命期钩子函数,然后通过自定义事件的方式,向外发送事件通知。
father.vue
<template>
<div>
<h2>动态组件</h2>
<button type="button" @click="viewDyn1">组件1</button>
<button type="button" @click="viewDyn2">组件2</button>
<keep-alive :include="/dyn2/">
<component :is="viewCom" @passData="acceptData"></component>
</keep-alive>
</div>
</template>
<script>
import dyn1 from "./dyn1";
import dyn2 from "./dyn2";
export default {
components: {
dyn1,
dyn2
},
data() {
return {
viewCom: "dyn1"
};
},
methods: {
viewDyn1() {
this.viewCom = "dyn1";
},
viewDyn2() {
this.viewCom = "dyn2"
console.log(this.$children);
},
acceptData(data) {
console.log('移除dyn2接收传过来的数据:'+data)
}
}
};
</script>
组件有条件地缓存【include和
exclude
】
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。(组件中name属性的值)max
- 数字。最多可以缓存多少组件实例。
匹配首先检查组件自身的 name
选项,如果 name
选项不可用,则匹配它的局部注册名称(父组件 components
选项的键值)。匿名组件不能被匹配
具体示例如下:
<!-- 逗号分隔字符串 -->
<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>
例:
father.vue
<keep-alive :include="/dyn2/">
<component :is="viewCom"></component>
</keep-alive>
更多推荐
所有评论(0)