vue学习笔记（八）——Vue组件-进阶（插槽、自定义指令）

一、Vue组件进阶

1.1 动态组件

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

效果如下:

1. 准备被切换的 - UserName.vue / UserInfo.vue 2个组件

2. 引入到UseDynamic.vue注册

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

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

5. 点击按钮 – 修改comName变量里的"组件名"

什么是动态组件?

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

如何使用动态组件?

vue内置的component组件, 配合is属性

如何切换?

改变is属性的值, 为要显示的组件名即可

1.2 组件缓存

问题1: 频繁的切换会导致组件频繁创建和销毁。

问题2: 性能不高。

问题3: 如何避免这个问题? 组件缓存

语法:

Vue内置的keep-alive组件包起来要频繁切换的组件

如何进行组件缓存?

vue内置的keep-alive组件把要缓存的组件包起来

组件缓存好处?

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

1.3 组件激活和非激活

扩展2个新的生命周期方法

方法名:

activated – 激活时触发

deactivated – 失去激活状态触发

如何知道缓存的组件是出现还是消失了?

activated – 获得激活状态

deactivated – 失去激活状态

1.4 组件插槽

目标：通过 slot 标签, 让组件内可以接收不同的标签结构显示

给组件插入什么标签, 组件就显示什么标签

语法口诀:

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

2. 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

当组件内某一部分标签不确定怎么办?

用插槽技术

插槽具体如何使用?

1. 先在组件内用slot占位

2. 使用组件时, 传入具体标签插入

插槽运行效果?

传入的标签会替换掉slot显示

1.5 组件进阶 - 插槽默认内容

如果外面不给传，想给个默认显示内容

口诀：

<slot>内放置内容，作为默认显示内容

效果：

不给组件传标签。slot内容原地显示

给组件内传标签，则slot整体被换掉

如何给插槽设置默认显示内容?

slot标签内写好默认要显示内容

什么时候插槽默认内容会显示?

当使用组件并未给我们传入具体标签或内容时

1.6 组件进阶 – 具名插槽

目标：一个组件内有2处以上需要外部传入标签的地方

语法:

1. slot使用name属性区分名字

2. template配合v-slot:名字来分发对应标签（ v-slot:可以简化成# ）

组件内多处不确定的标签如何做?

slot占位，给name属性起名字来区分

template配合v-slot:name分发要替换的标签

v-slot: 可以简化成什么?

1.7 作用域插槽

准备工作：插槽显示默认内容

需求：在使用此组件时，不改右侧源码，是否使用defaultTwo值替换默认内容

目标：使用插槽时, 想使用子组件内变量

口诀:

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

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

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

scope = {row: defaultObj}

作用域插槽什么时候使用?

使用组件插槽技术时，需要用到子组件内变量

作用域插槽使用口诀?

子组件在slot身上添加属性和子组件的值

使用组件处template配合v-slot=“变量名”

收集slot身上的所有属性和值

1.8 组件进阶 – 作用域插槽使用场景

目标：自定义组件内标签+内容

准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里

准备UseTable.vue – 准备数据传入给MyTable.vue使用

例子：我想要给td内显示图片，需要传入自定义的img标签

在MyTable.vue的td中准备<slot>占位，但是外面需要把图片地址赋予给src属性，所以在slot上把obj数据绑定

<template><div><table border="1"><thead><tr><th>序号</th><th>姓名</th><th>年龄</th><th>头像</th></tr></thead><thead><tr v-for="(item, index) in arr" :key="index"><td>{{ index }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><!-- <td>{{ item.headImgUrl }}</td> --><td><!-- 相当于 row: item --><slot :row="item">{{ item.headImgUrl }}</slot></td></tr></thead></table></div>
</template><script>
export default {props: ['arr']
}
</script>

在UseTable使用MyTable的时候，template上v-slot绑定变量，传入img组件设置图片地址

<template><div><!-- <MyTabel :arr="list"><template></template></MyTabel> --><MyTabel :arr="list"><!-- scope = {row: item} --><template v-slot="scope"><a :href="scope.row.headImgUrl">{{ scope.row.headImgUrl }}</a></template></MyTabel><MyTabel :arr="list"><template v-slot="scope"><img :src="scope.row.headImgUrl" alt="" style="width:200px"></template></MyTabel></div>
</template><script>
import MyTabel from '@/components/06/MyTabel.vue'
export default {components: {MyTabel},data () {return {list: [{name: '小传同学',age: 18,headImgUrl: 'http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg'},{name: '小黑同学',age: 25,headImgUrl: 'http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg'},{name: '智慧同学',age: 21,headImgUrl: 'http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg'}]}}
}
</script>

我们为什么要使用作用域插槽?

可以让组件更加灵活的适用于不同的场景和项目