Advanced Component Usage笔记

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

slot 插槽

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

<myCmp>
	<p slot='title'>{{ title }} </p>
</myCmp>

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

组件动态切换

<keep-alive>
  <component :is="selected">
  </component>
</keep-alive>

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

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

destroyed(){
  console.log('Calc destroyed');
},
deactivated(){
  console.log('Calc deactivated');
},
activated(){
  console.log('Calc activeted');
}