阅读 61

vue3 --插槽

写在前面:组件有各自编译作用域---父级模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在子作用域中编译的

理解插槽

vue文档里说,将<slot>元素作为承载分发内容的出口,乍一看,确实不好理解。 我对slot的通俗理解: 因为组件有各自编译作用域,直接在父级模板里的子级标签中间填充内容是无效的,毕竟子级标签是我们自己创建出来的,不是HTML自带标签

//父组件
<template>
    <div>
        <Child><p>儿子,这是我要写给你的内容...</p></Child> 	//这是在父组件中定义的内容,子组件无法收到
    </div>
</template>
复制代码

如果你确实想在这中间填充内容,怎么办? 那就得父子组件间建立通信。预先在相应的子组件中声明一下,给你要填充的内容留个坑位,于是就有了<slot></slot>

//子组件
<template>
    <div>
        <slot></slot>	//给父组件要填充的内容留个坑位,相当于父子组件建立了通信
    </div>
</template>
//父组件
<template>
    <div>
        <Child><p>儿子,我准备给你打生活费了</p></Child> 	//父子组件建立通信后,子组件可以接受到填充内容,并在后续渲染
    </div>
</template>
复制代码

可是如果希望根据坑位坐标,快速找到位置 那就需要在子组件中通过<slot name="xxx"></slot>提前标注, 在父组件中在要显示的标签里添加slot="xxx"'属性,表示这条信息需绑定到某一个具体的坑位

//父组件
<template>
    <div>
        <Child>
            <span>5000 or </span>
            <span slot='ok'>10000</span>
        </Child> 	
    </div>
</template>
//子组件
<template>
    <div>
        <slot></slot>	//默认插槽,将匹配<span>5000 or </span>
        <slot name="ok"></slot> //具名插槽,将匹配<span slot='ok'>10000</span>
    </div>
</template>
复制代码

如果子组件中的slot标签中有内容表示什么意思? 父子组件已建立好通信,可父组间鸽了子组件,没有“填充内容”,子组件则会显示默认内容

笔记部分

理解了插槽之后,就开始基于Vue3做点正式的笔记,(可以点击blog.csdn.net/marendu/art…) 在Vue3中,用template标签包裹要填充的内容,v-slot属性也需定义在template标签上,只有一种例外情况,就是默认插槽 v-slot:的语法糖是#,但后面必须有插槽名,例如v-slot:default 等价于 #default

插槽有三种

默认插槽

//父组件 (Child外层有templat>div标签,此处省略,方便观看)
<Child>
    <template v-slot:default>
        <p></p>
    </template>
</Child>

//也可以是这样,属于例外情况
//父组件
<Child v-slot:default>
	<p></p>
</Child>
复制代码

具名插槽

//父组件
<Child>
    <template v-slot:xxx>	//绑定名称
        <p></p>
    </template>
    <template v-slot:[动态插槽名]>	//动态插槽名,即通过data的属性值来控制插槽名,以动态更新
        <p></p>
    </template>
</Child>

//子组件
<template>
    <div>
        <slot name=xxx></slot>
        <slot name=xxx></slot>
    </div>
</template>
复制代码

作用域插槽

作用域插槽的作用即延展子模板中数据的作用域,使得在父级模板中也可使用子模板中的数据

//父组件
<Child>
    <template v-slot:num="slotProps">
        <p>{{slotProps.value}}</p>	//访问子组件中“num”插槽的value属性值
    </template>
    
    <template v-slot:default="slotProps">
        <p>{{slotProps.price}}</p>	//访问子组件中对应默认插槽的price属性值
    </template>
    
    <template v-slot:name="{uname: myname}">
        <p>{{myname}}</p>	//访问子组件中对应“name”插槽的uname属性值,采用解构赋值的方式
    </template>
</Child>

//子组件
<template>
    <div>
        <slot name="num" :value="value"></slot>
        <slot :price="price"></slot>
        <slot name="name" :uname="uname"></slot>
    </div>
</template>

复制代码

插槽的实现原理(/过程):

当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm.$slot中,默认插槽
为vm.$slot.default,具名插槽为vm.$slot.xxx,xxx 为插槽名,当组件执行渲染函数时候,
遇到slot标签,使用$slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,
则可称该插槽为作用域插槽
复制代码

参考:

Vue入门之slot属性 - 简书 (jianshu.com)

「2021」高频前端面试题汇总之Vue篇 (上) (juejin.cn)

vue2到vue3中插槽slot变化详解---从slot,slot-scope到v-slot的变化_marendu的博客-CSDN博客

文章分类
前端
文章标签