文章目录
求一键三连
希望大家看完觉得有用的话点赞、关注和收藏,感谢!!!
重点
插槽在组件封装中特别有用,尤其是在组件库项目中,因为之前没有复习插槽,导致很多东西都特别难以实现,卡了很多天。
但是只要使用了插槽,具名插槽,作用域插槽,很多东西都迎刃而解,插槽让组件封装变的更加灵活,也让组件库成为可能。
认识插槽
更加动态的使用组件
slot是占位,让父组件决定使用什么元素。
slot是给有不同需要的时候用的
插槽的使用
在子组件中间放入需要插入的东西,和子组件插槽的位置是对应上的。
子组件:在template中默认值 表示这是一个插槽
父组件:
<show-message title="哈哈哈">
<button>我是按钮元素</button> //此时插槽中放的就是按钮
</show-message>
插槽是可以设置默认值的,在slot里面写上内容就是没有传递东西时的默认值
多个插槽(具名插槽 name=''name" #name)
如果不命名直接用,则在调用子组件时放入的html元素全都放在一个插槽内。
(2023.2.4 因为忘记了这个具名插槽,所以效果一直很差,一定要好好复习,别总想往前走!)
如何使用,在父组件中调用子组件时,在子组件中写<template v-solt:插槽名>具体的东西
子组件: <slot name="left">left</slot>
在插槽上写上name
父组件: 推荐用# 且特别注意只能写在一个template上面
<nav-bar>
<template #left>//这里用#插槽名来表示对应插槽名
<button>{
{leftcontent}}</button>
</template>
或者
<template v-slot:right> //v-slot:插槽名
<a href="#">登录</a>
</template>
动态插槽(做个了解)
当图片路径较深时怎么办:使用@
@/img/图片.jpg 这样就是先找到img文件夹然后再找图片
渲染作用域
简单就是每个组件里面的内容都必须在本组件中定义使用,无法跨组件调用。
在本组件中编写的,那么用到的数据都必须是本组件中的数据
例子:
在刚才具名插槽中,有一个插槽在父组件中是按钮,按钮的内容是{
{leftText}},那么这个模板语法的内容leftText必须是在父组件app.vue中定义好的,也就是它的数据必须在本组件中定义。
虽然它最后展示是在子组件中展示,但是它是在父组件中使用的,所以必须在父组件中定义。
作用域插槽(插槽传递子组件属性)
我们希望对之前的案例做一个更改,之前案例的子组件中格式都是写死的,都是在子组件中定义好的,比如说都是span,并没有使用插槽,那么我们希望可以使用插槽来进行更改,可以由父组件决定是span或者说按钮等内容。
首先是使用插槽,那么span就变为默认值,如果没有使用插槽则默认为span
<slot >
<span>{
{
item }}</span>
</slot>
那么就有一个问题:子组件中for循环的item如何传递给父组件
(这个真的特别重要,因为不记得作用域插槽的用法,在自己封装组件的时候卡了好几天,基础真的太重要了)
父组件插槽原来是这样的,这个item我们拿不到
所以我们要解决的就是一个插槽传递信息的问题,在使用的插槽的时候可以把子组件的数据传出来
我们传递给插槽。
子组件的操作:传递属性
在插槽上写: 用:绑定一个属性传递出去 :item=“要传递的属性”
这里呢也有一个注意事项,那就是:
在vue中,动态绑定的属性都要加冒号:
而静态属性则不用,比如这里的abc=“cba”,它就是静态的
但是对于item来说它是动态的,所以必须要加冒号:
<slot :item="item" abc="cba">
<span>{
{
item }}</span>
</slot>
父组件操作:接受属性并使用
用template #:插槽名=“接受属性名” 在这里默认使用props命名(可以用其他命名)
这里的props包含了该插槽所有传递出来的属性,包括item和abc
之后就可以在template中使用接受到的数据了props.item
<template v-slot:name="props">
<button>{
{
props.item }}</button>
</template>
//另一种写法
<template #name="props">
<button>{
{
props.item }}</button>
</template>
在这里呢,就可以不写具名,就是#=“props”,因为此时看只有一个默认插槽!
这个应用场景真的就非常实际,很常见,老师讲的都是实际开发的例子
语法糖:
如果只有一个默认插槽, 那么template可以省略,因为没有必要写template,不需要具名
#=“props”
特别注意最后 一个,只要出现多个插槽,请始终为所有的插槽使用完整的基于template的语法。
重写案例错误;
template中是不可以写后面这些的,因为无法监听到必须要写到模板里的具体元素里
template标签内容天生不可见,设置了display:none;
正确的写法: