一.组件进阶
1.动态组件
多个组件使用同一个挂载点,并动态切换,这就是动态组件
完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息
- 准备被切换的 - UserName.vue / UserInfo.vue 2个组件
- 引入到UseDynamic.vue注册
- 准备变量来承载要显示的"组件名"
- 设置挂载点, 使用is属性来设置要显示哪个组件
- 点击按钮 – 修改comName变量里的"组件名"
<template>
<div>
<button @click="comName = 'UserName'">账号密码填写</button>
<button @click="comName = 'UserInfo'">个人信息填写</button>
<p>下面显示注册组件-动态切换:</p>
<div style="border: 1px solid red;">
<component :is="comName"></component>
</div>
</div>
</template>
<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 创建要被切换的组件 - 标签+样式
// 2. 引入到要展示的vue文件内, 注册
// 3. 变量-承载要显示的组件名
// 4. 设置挂载点<component :is="变量"></component>
// 5. 点击按钮-切换comName的值为要显示的组件名
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
data(){
return {
comName: "UserName"
}
},
components: {
UserName,
UserInfo
}
}
</script>
vue内置component组件, 配合is属性, 设置要显示的组件名字
2.组件缓存
组件切换会导致组件被频繁销毁和重新创建, 性能不高
keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法
<div style="border: 1px solid red;">
<!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
补充生命周期
- activated - 激活
- deactivated - 失去激活状态
3.激活和非激活
被缓存的组件不再创建和销毁, 而是激活和非激活
补充2个钩子方法名:
- activated – 激活时触发
- deactivated – 失去激活状态触发
4.组件插槽
用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
- vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽
语法口诀:
- 组件内用占位
- 使用组件时夹着的地方, 传入标签替换slot
5.插槽默认内容
如果外面不给传, 想给个默认显示内容
- 口诀: 夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示
<slot>默认内容</slot>
6.具名插槽
当一个组件内有2处以上需要外部传入标签的地方
- 传入的标签可以分别派发给不同的slot位置
- v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)
v-slot可以简化成#使用
- v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成**#**
- slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签
组件内变量绑定在slot上, 然后使用组件v-slot=“变量” 变量上就会绑定slot身上属性和值
7.作用域插槽
子组件里值, 在给插槽赋值时在父组件环境下使用
口诀:
- 子组件, 在slot上绑定属性和子组件内的值
- 使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
- scope变量名自动绑定slot上所有属性和值
组件内变量绑定在slot上, 然后使用组件v-slot=“变量” 变量上就会绑定slot身上属性和值
8.作用域插槽使用场景
了解作用域插槽使用场景, 自定义组件内标签+内容
案例:封装一个表格组件, 在表格组件内循环产生单元格
- 准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里
- 准备UseTable.vue – 准备数据传入给MyTable.vue使用
components/06/MyTable.vue - 模板
<template>
<div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>