Vue学习 组件进阶

        动态组件

多个组件使用同一个挂载点，并动态切换，这就是动态组件

准备两个切换的组件

引入并且注册

准备变量来承载要显示的"组件名"

设置挂载点<component>, 使用is属性来设置要显示哪个组件

设置触发条件 例如按钮的点击事件,修改"要显示的组件名"变量里的"组件名"

切换的时候会频繁的创建和销毁,性能不佳

组件缓存

 <keep-alive>
      要缓存的相关内容
    </keep-alive>

搭配动态组件频繁使用的切换功能的实现的话 性能极佳

• ctivated - 激活

• deactivated - 失去激活状态

缓存状态中使用的声命周期的方法 监听相关的信息

<slot> 如果不插入内容的话,可以默认显示此        内容</slot>

组件插槽

用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容.通过定义name

template标签中使用 v-slot={name}接收想要插入的内容

1. 子组件, 在slot上绑定属性和子组件内的值

2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"

3. scope变量名自动绑定slot上所有属性和值