![cover](https://img-blog.csdnimg.cn/182745241c214005a247806f11a88c2f.png)
slot插槽的简单理解
是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。自己理解为一个占位符,当需要用时可以定义一个slot,不需要用时slot,页面上也不会有痕迹。插槽显不显示是由父盒子决定的,插槽在哪个位置上显示是由子组件决定的。子组件父组件这个时候,在调用子组件的地方,如果我们写了内容如:asd,(写什么都可以)没写内容的也不
slot概念
是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。
自己理解为一个占位符,当需要用时可以定义一个slot,不需要用时slot,页面上也不会有痕迹。
插槽显不显示是由父盒子决定的,插槽在哪个位置上显示是由子组件决定的。
插槽可以分为三种:匿名插槽|具名插槽|作用域插槽
匿名插槽
slot没有设置name属性这种插槽在一个组件中一般只有一个
子组件
<template>
<div>
<div>这里是插槽上面</div>
<slot></slot>
<div>这里是插槽的下面<div>
</div>
</template>
父组件
<template>
<div>
<!--调用子组件 -->
<myscope>asd</myscope>
</div>
</template>
<script>
import myscope from './myscope.vue' //导入
export default {
components:{
myscope //注册组件
}
}
</script>
这个时候,在调用子组件的地方,如果我们写了内容如:asd,(写什么都可以)
没写内容的也不影响显示,就没了内容而言
具名插槽
具名插槽理论上可以有无数个,可以根据实际su'y
子组件,就是给slot标签添加上 name:名字(什么都可以)
父组件,在父组件调用子组件的地方里面添加<template></template>并加上对应的slot名字,就可以使对应的内容显示在对应的子组件具名插槽中
父组件
<template>
<div>
<!-- 在使用子组件的时候,在组件之间的内容默认会覆盖匿名插槽 -->
<hmnav>
<template #left> <!-- 简写 v-slot:可以简写为# -->
后退
</template>
我的导航栏
<template v-slot:right> <!-- 常规写法 -->
按钮
</template>
</hmnav>
</div>
</template>
子组件
<template>
<div class="nav">
<!-- 匿名插槽:slot没有设置name属性
这种插槽在一个组件中一般只有一个 -->
<div class="left"> <!-- 具名插槽 -->
<slot name='left'></slot>
</div>
<div class="center">
<!-- 内容占位 这个就是匿名插槽-->
<slot>添加默认值</slot>
</div>
<div class="right"> <!-- 具名插槽 -->
<slot name='right'></slot>
</div>
</div>
</template>
作用域插槽
作用域插槽相比前两个要复杂一点
使用作用域插槽 1.使用子组件 2.通过v-slot接收子组件所传递的数据
作用域插槽和具名插槽的区别是什么?
简单说就是作用域插槽可以添加数据
父组件
<myscope v-slot="scope"> <!-- 这里是正常写法 -->
<p>{{ scope }}</p>
<p>123</p>
</myscope>
<myscope>
<template v-slot:myslot="scope"> <!-- 这个是具名和作用域插槽一起使用 -->
<p>{{ scope }}</p>
<p>456</p>
</template>
</myscope>
<myscope>
<template #myslot="scope"> <!--这个是第二种的简写, v-slot: 可以简写为# -->
<p>{{ scope }}</p>
<p>789</p>
</template>
</myscope>
子组件
<template>
<div class="data">
<p>----{{ myname }}---</p>
<slot :data="myname" aa="qq" cc="tt"></slot>
<slot name="myslot" :data="myname" aa="cc" cc="ss"></slot>
</div>
</template>
<script>
export default {
data() {
return {
myname: "jack",
};
},
};
</script>
最后的显示效果为
在这里我们可以观察到,我们从子组件种拿到的数据是对象里面的键值对形势
{ "data": "jack", "aa": "cc", "cc": "ss" }
所以,在平时的开发情况下,我们还可以对拿到的数据进行解构,重命名,设置默认值的操作
根据开发情况使用
----------------------------------------------------------------------------------------------
以上就是我对slot的简单理解,看完别忘了点个赞哦~~~~~~~
更多推荐
所有评论(0)