Vue自定义指令原来这么简单，web前端开发学习

我是内容

寒雨连江夜入吴,

平明送客楚山孤。

洛阳亲友如相问，

一片冰心在玉壶。

总结: 组件内容分发技术, slot占位, 使用组件时传入替换slot位置的标签

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

目标: 如果外面不给传, 想给个默认显示内容

口诀: 夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示

默认内容

1.5 组件进阶 - 具名插槽

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

传入的标签可以分别派发给不同的slot位置

要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

components/04/Pannel.vue - 留下具名slot

<span class=“btn” @click=“isShow = !isShow”>

{ { isShow ? “收起” : “展开” }}

views/04_UseSlot.vue使用

案例：折叠面板

芙蓉楼送辛渐

我是内容

<template #title>

我是标题

<template #content>

寒雨连江夜入吴,

平明送客楚山孤。

洛阳亲友如相问，

一片冰心在玉壶。

v-slot可以简化成#使用

v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

1.6 组件进阶 - 作用域插槽

目标: 子组件里值, 在给插槽赋值时在父组件环境下使用

复习: 插槽内slot中显示默认内容

例子: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

口诀:

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

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

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

components/05/Pannel.vue - 定义组件, 和具名插槽, 给slot绑定属性和值

芙蓉楼送辛渐

<span class=“btn” @click=“isShow = !isShow”>

{ { isShow ? “收起” : “展开” }}

{ { defaultObj.defaultOne }}

views/05_UseSlot.vue

案例：折叠面板

{ { scope.row.defaultTwo }}

总结: 组件内变量绑定在slot上, 然后使用组件v-slot=“变量” 变量上就会绑定slot身上属性和值

1.7 组件进阶 - 作用域插槽使用场景

目标: 了解作用域插槽使用场景, 自定义组件内标签+内容

案例: 封装一个表格组件, 在表格组件内循环产生单元格

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

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

components/06/MyTable.vue - 模板(直接复制)

序号 姓名 年龄 头像

views/06_UseTable.vue - 准备数据, 传入给MyTable.vue组件里循环使用

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”,

},

],

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