vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

一、生命周期如下图,所有红色的函数为钩子函数 

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

二、slot插槽的使用

基本用法如下:

父组件在子组件中插入内容

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

子组件,通过<slot>标签显示

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

复杂使用

在App.vue中使用slot进行占位、

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存 

子组件中使用name来进行区分

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

三、动态组件和缓存,component,keep-alive

 

子组件

子组件 FormHelper.vue

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

 子组件FormOne.vue

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

子组件FormTwo.vue

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存 

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存

父组件App.vue

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存 

变更component的值,动态显示组件

vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存