Advanced Component Usage笔记

这部分是讲了关于vue 组件的高级特性,尽管有些内容我觉得没啥用,可能这些特性太高级了,我做的东西都太低级了。仔细又想了一下,好像这些特性也不是特别高级,也就是一般般吧,没啥了不起的。

slot 插槽

父组件向子组件传参数可以用props。vue还提供slot的方式可以传递一段HTML代码。

1
2
3
<myCmp>
<p slot='title'>{{ title }} </p>
</myCmp>

这样可以把p标签下的内容全部传到子组件中,在子组件中只需要使用slot,引用即可,必要的时候加上name属性。

组件动态切换
1
2
3
4
<keep-alive>
<component :is="selected">
</component>
</keep-alive>

component 是vue的保留字,通过这个标签,就可以实现简单的组件动态切换。这里的selected是一个变量,保存需要加载的组件的名字。

keep-alive表示在组件切换时,是否需要销毁和重建组件,加上keep-alive,可以节省一些开销,也能缓存一些数据。同时会给组件增加两个lifecycle hooks: deactivatedactivated

1
2
3
4
5
6
7
8
9
destroyed(){
console.log('Calc destroyed');
},
deactivated(){
console.log('Calc deactivated');
},
activated(){
console.log('Calc activeted');
}