vue插槽slot的详细用法,包括各种传值情况
学过去很久的vue,突然想到slot这个有趣的东西,所以写一篇用法文章来回顾一下,虽然个人感觉做项目的时候好像很少用到插槽,但是这个东西的功能确实是很强大的
1、插槽slot的基本使用:
所谓插槽,就是vue中父组件在调用子组件的时候,需要在子组件的某个特定位置使用一些模板代码,主要是html,也就是在子组件的固有模板中插入一些可变化的前端部分,所以,需要在子组件的某个位置放置一个slot插槽,可以理解为一个存放父组件传递过来的代码模板的容器,之后,只需要在父组件中写入模板接口,示例代码如下:
子组件:
<template>
<div>
<slot></slot> //这个位置就是存放模板的容器
<div>我是子组件</div>
</div>
</template>
<script>
父组件:
<script setup>
// import HelloWorld from './components/HelloWorld.vue'
import mycom from './components/mycompo.vue'
import myslot from './components/slotone.vue'
</script>
<myslot>
<h1>我是父组件</h1> //这段代码将会插入到子组件中slot的位置
</myslot>
2、具名插槽
什么是具名插槽呢?顾名思义,就是有名字的插槽,因为在一个子组件中,通常需要父组件传递不同的模板,也就是说这些模板需要插入到子组件的不同位置,所以为了区分这些不同的模板及其插入的位置,我们就需要使用具名插槽。
如何使用具名插槽,需要在子组件的slot标签里面使用name属性指定该slot名字,在父组件中使用v:slot或者简写属性#来指出该模板对应的子组件的那个name值,然后进行插入,上代码理解一下:
子组件:
<template>
<div>
我的组件
<div>{
{
kk}}</div>
<ul>
<li v-for="(item,index) in myarray" :key="index">{
{
item}}</li>
</ul>
<div>{
{
myfun(kk)}}</div>
<slot name="A" msg="A的数据"></slot> //这个是一个name为A的插槽
<slot name="B" msg="B的数据"></slot> //这个是一个name为B的插槽
</div>
</template>
父组件:
<script setup>
// import HelloWorld from './components/HelloWorld.vue'
import mycom from './components/mycompo.vue'
</script>
<mycom kk="xjd love zsy" :myarray="mylist" :myfun="myfun" class="ziclass">
<template #A>
/**注意,使用具名插槽时,插入的代码必须使用template包裹,
并且在其中指出要插入的slot对应的名字,比如这个模板就是要插入
子组件中名字为A的slot中**/
<h1>插槽A</h1>
</template>
<template #B> //这个模板是要插入子组件中名字为B的slot中
<h1>插槽B</h1>
</template>
</mycom>
3、父组件的模板需要使用子组件的数据的情况
这种情况就涉及到数据的传输问题,总结一下来说,就是需要子组件的数据先传递到父组件,然后父组件在使用数据进行渲染,对于普通的slot来说,就是在子组件中使用名字=“值” 的形式来传送数据,注意如果使用到的值是data里面的,则需要在名字前面加:,也就是 :名字=“data里面的数据” ,而父组件中使用 v-slot=“对象名字” 的方式来获取子组件返回的数据大对象, 示例如下:
子组件:
<template>
<div>
<slot :msg="msg"></slot>
</div>
</template>
<script>
export default {
data() {
return {
msg:"子组件的数据"
}
},
}
</script>
父组件:
<myslot v-slot="fuprops"> //fuprops是一个包含所有传递过来的键值对的大对象
<h1>传递过来的是{
{
fuprops.msg}}</h1> //使用到fuprops中的msg这个键的值
</myslot>
效果如下:
对于具名插槽的数据传输,只是在父组件的代码上有区别,不使用v-slot进行绑定,而是直接绑定到名字上即可:
父组件:
<mycom kk="xjd love zsy" :myarray="mylist" :myfun="myfun" class="ziclass">
<template #A="Ashuju"> //将数据大对象绑定在这里
<h1>插槽A+{
{
Ashuju.msg}}</h1> //使用到slot名字为A的msg数据
</template>
<template #B="Bshuju"> //同理
<h1>插槽B+{
{
Bshuju.msg}}</h1>
</template>
</mycom>
子组件:
<slot name="A" msg="A的数据"></slot>
<slot name="B" msg="B的数据"></slot>
效果如下:
好,今天的slot知识就写这些,后续还有比较有意思的内容还会更新,大家也可以上vue的官网查看更加详细的slot知识,但是我相信上述所讲到的应该是够用了!