vue- 动态组件

动态组件: 在同一挂载点,可以切换显示不同组件

步骤:

1. 引入组件名

2. 定义变量 显示 组件名    comName: 'UserName',

3. 设置挂载点 <component :is="comName"></component>

4. 绑定点击事件 =变量=组件名

组件缓存

使用 keep-alive 把要缓存的组件包起来

1. 缓存好处?

   不会频繁的创建和销毁组件, 页面更快呈现

组件插槽 (v-slot: 简写成 # )

使用场景: 组件内某一部分标签不确定时

使用步骤:

1. 组件内 使用 <slot> </slot> 占位

2.使用组件时,传入具体变迁插入:

Pannel.vue-----

 <slot name="contain"></slot>



App.vue ------

引入Pannel

<Pannel>

<template #contain>   插入的内容   </template>

   </Pannel>

作用域插槽(需要数据时使用)

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

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

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

4.    :row=obj 

5.        scope:{

                   row:obj