vite+vue3使用slot插槽

相见一月

已于 2022-10-24 08:24:43 修改

阅读量2k

点赞数

文章标签： vue.js 前端 javascript 1024程序员节

于 2022-10-21 11:51:13 首次发布

本文链接：https://blog.csdn.net/weixin_59916662/article/details/127438922

版权

如何简单明了使用slot插槽

在官网已经表明如何使用，但我觉得看的有点小乱，本文章记录一下，也是整理自己的思路

使用solt的理由：在不同的组件使用，它最核心的地方展示是不一样的，但其它的地方是一样的，只是数据不一样。也就是说只有在不一样的地方才使用slot插槽

如果子组件不使用slot插槽的情况下，在父组件里面写内容是不会渲染的。

1、简单使用slot插槽

2、默认插槽和具名插槽、动态插槽名

2.1、name参数：默认插槽和具名插槽

2.2、[key: string]: any参数以及作用域插槽

2.3、动态插槽名

3、无渲染组件

4、插槽选择器

1、简单使用slot插槽

在A文件定义，定义slot插槽

<template>
    <div>
        <slot></slot>
    </div>
</template>

在B文件使用，使用slot插槽

<template>
    <soltA>
        //使用slot
       <div class="box">要写的内容</div>
    </soltA>
</template>
<script setup lang='ts'>
//引入组件
import soltA from './a.vue';


</script>

就是最简单的slot插槽使用

2、默认插槽和具名插槽、动态插槽名

slot插槽有两种参数，一个是name,定义插槽名

第二个是[key: string]: any ，与它一起用的还有作用域插槽

注意：

一旦使用多个slot，只有一个可以不写name(不写的默认是default），也就是默认插槽，

其它的slot都要写name属性，否则会重复渲染，也就是具名插槽

2.1、name参数：默认插槽和具名插槽

先说第一个参数 name , 它是默认插槽和具名插槽的分界线，用代码来说

在A文件定义，定义slot插槽

<template>
    <div class="container">
        <header>
            <!-- 标题内容放这里 -->
            <slot name="header"></slot>
        </header>
        <main>
            <!-- 主要内容放这里 -->
            <slot></slot>
        </main>
        <footer>
            <!-- 底部内容放这里 -->
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

在B文件使用，使用slot插槽

同时定义多个slot时，要使用template 组件，如果不使用，就默认渲染在没写名的solt上，也就是 default ( 默认插槽 ) 。

#的全名是v-slot，一般我们都是使用#号

<template #defaule>其意思就是“将这部分模板片段传入子组件的 name 为 header 插槽中”。

<template>
  <soltA>
        <template #footer>
            <div class="box">底部内容放这里</div>
        </template>

        <template #header>
            <div class="box">标题内容放这里</div>
        </template>
        
        <template #default>
            <div class="box">主要内容放这里</div>
        </template>
  </soltA>
</template>

观察下面并结合上面，你会发现，

渲染的位置关键不是在使用slot的位置，而是在 name 定义的位置

这点很重要，因为的使用的时候改不了它的渲染的位置

2.2、[key: string]: any参数以及作用域插槽

使用 [key: string]: any，与它一起用的还有作用域插槽

使用场景：数据经过一定处理，然后返回给组件使用

在A文件定义，定义slot插槽（ [key: string]: any参数）

<template>
    <div class="container">
        <slot :item ='item' :data="data"></slot>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
let item = ref([
    {
        name:'张三',
        age:18,
    },
    {
        name:'李四',
        age:28,
    }
]) 

let data = ref(999)
</script>

在B文件使用，使用slot插槽（ 作用域插槽 ）

在父组件使用 template 组件上使用#xxx="{ xxx , xxx}"接受数据,使用ES6{}解构数据更好，如果好奇不使用是怎么样的，可以复制删除括号试下

<template>
    <soltA>
        <template #default="{ item , data }" class="box">
            <div v-for="i in item">
                姓名：{{i.name}}
                年龄：{{i.age}}
                money:{{data}}
            </div>
        </template>
    </soltA>
</template>
<script setup lang="ts">
import soltA from "./a.vue";
</script>

2.3、动态插槽名

这个对我们这些普通开发并不实用，而且还有限制，只是官方所有指令都支动态绑定而已

使用

<template>
    <template v-slot:[dynamicSlotName]>
       ...
    </template>

     <!-- 缩写为 -->
    <template #[dynamicSlotName]>
       ...
    </template>

    <!-- 错误写法：动态参数语法的限制 -->
    <template  #['foo' + bar]> ... </template >
</template>

如果你需要传入一个复杂的动态参数，官方推荐使用计算属性替换复杂的表达式

3、无渲染组件

这个官方说的也很明确了，我就不再多写别的了

无渲染组件的概念是：在子组件或slot的组件上不写任何元素，不做任何渲染，只处理数据或逻辑

官方案例：在A文件定义，定义slot插槽

<template>
  <slot :x="x" :y="y"/>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
  
const x = ref(0)
const y = ref(0)

const update = e => {
  x.value = e.pageX
  y.value = e.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>

在B文件使用，使用slot插槽

<template>
	<MouseTracker v-slot="{ x, y }">
  	Mouse is at: {{ x }}, {{ y }}
	</MouseTracker>
</template>
<script setup>
import MouseTracker from './MouseTracker.vue'
</script>

这个是官方案例是根据鼠标的位置来展示它的XY值

无渲染组件官方案例

4、插槽选择器

这个功能是来至vue3单文件组件CSS 功能

使用场景：定义特定的class类名，到父组件直接使用，不用每次调用该组件时再次重复写这类名的样式

简单来说，就是子组件是默认修改不了父组件有样式，而插槽选择器可以在子组件中选中父组件slot的元素

在A文件定义，定义slot插槽

<template>
    <div class="container">
        <slot :item ='item' :data="data"></slot>
    </div>
</template>
<style lang='less' scoped>
//修改父组件的 .slot-div 的样式
:slotted(.slot-div){
color: red;
}
</style>

在B文件使用，使用slot插槽

<template>
    <soltA>
        <template #default>
            <div class="slot-div">在使用slot,它的类名是slot-div</div>
            <div>它的没有类名</div>
        </template>
    </soltA>
</template>
<script setup lang="ts">
import soltA from "./a.vue";
</script>