vue教程(三)-slot\keep-alive的使用

一、slot其实就是填坑操作，父组件传递dom结构，是vue提供的一种内置组件（组件知识请查看上篇博客内容）

写法：<slot></slot>

例子：

var child = {template:'<div><slot></slot></div>'} //子组件中预留出坑来，让父组件填坑

Vue.component('my-child',child);//全局注册方式

父中使用

var App = {template:'<my-child><button>填入按钮</button></my-child>'} //父组件中使用子组件，并传入button按钮。

 

当子组件预留出多个坑时，需要给坑指定name属性，例如

var child = {template:'<div><slot name='one'></slot><slot name='two'></slot></div>'} //子组件中预留出多个坑来，让父组件填坑，则需要指定name属性

父中使用

var App = {template:'<my-child><button slot='one'>填入按钮</button><h1slot='two'>填入标题</h1></my-child>'} //父组件中使用子组件，需使用slot属性指定填入到哪个坑中

二、keep-alive

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。

因此再动态变化填充dom时，一般使用keep-alive包裹，在上述两个生命周期钩子中进行相关操作，从而达到业务需要。

注：git上有开发的项目作为例子，有兴趣的可以下载学习。源代码已上传git：Git地址，QQ交流群

                                                                                                                                           ①群：699050440

 

                                                                                                                                           ②群：824313640