Vue插槽的使用

Posted 2023-05-06 shengjiangMock

在Vue中插槽是个很好的东西，它被广泛应用于组件的封装，使组件更加灵活。提升了组件的扩展性。

在项目中，可以用<slot></slot>来定义一个插槽。我们可以在引用该组件的时候往这个插槽内放任何我们想放的元素。

插槽分为默认插槽，具名插槽，作用域插槽。

我们先看默认插槽，默认插槽就是上面我说的<slot></slot>放在组件内的某个位置，在引用的时候进行引入元素即可。代码示例

//这是vue的某个组件页面
<template>
     <div>
        <!-- 默认插槽 -->
        <div class="title">
            <slot></slot>//这里放的插槽就是默认插槽，在引用组件的时候会默认插入到这里面
        </div>
        <div class="centent"></div>
        <div class="footer"></div>
    </div>
</template>

　　我们再引入组件<template>

 

<template>
    <div>
        <demoVue>
            <template>
                <!-- 这里的内容会放入到默认插槽的位置 -->
                <p>这是放入到默认插槽的内容</p>
            </template>
        </demoVue>
        <!-- 使用组件 -->
    </div>
</template>

<script>
import demoVue from \'./demo.vue\';//引入  ①
export default 
    components:  demoVue ,//注册组件  ②
    name: \'WorkspaceJsonDemoBox\',
    data() 
        return  ;
    ,
    mounted() ,
    methods: ,
;

 上述代码插入的内容会自动带入到默认插槽的位置

具名插槽的使用就像是我们给slot一个name  给他一个标签，我们使用template的时候使用name来指定我们要将内容放到哪里去。以下是代码描述

 <div class="centent">
                <div class="left">
                    <!-- 我们定义一个左侧插槽 name为left-->
                    <slot name="left"></slot>
                </div>
                <div class="right">
                    <!-- 我们定义一个右侧插槽 name为right-->
                    <slot name="right"></slot>
                </div>
</div>

以上代码是组件内代码

<template>
    <div>
        <demo><!-- ③使用组件 -->
            <template #left>
                <!-- 在这里指定插入的位置及内容 -->
                <p>插入到左侧的内容</p>
            </template>
            <template #right>
                <p>插入到右侧的内容</p>
            </template>
        </demo>
    </div>
</template>

<script>
import demo from "./demo.vue"; //① 引入组件
export default 
    components:  demo , // ②注册组件

　　以上代码为页面内代码

效果如下

 作用域插槽的使用个人用得比较多的地方就是在表格里面携带参数。在el-table里面进行操作的时候，可以使用slot-scope来拿到当前行的参数

<el-table ref="multipleTable" :data="this.tableData"  tooltip-effect="dark" 
            @selection-change="handleSelectionChange" row-dblclick="showUP">
            <el-table-column fixed type="selection" > </el-table-column>
            <el-table-column sortable fixed label="名称" >
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <span class="editInfo" @click="editInfoEvent(scope.row)">编辑</span>   #################
                </template>
            </el-table-column>
</el-table>

像是在标注行的scope.row拿到的就是该行的数据，官方的定义是这样：在封装组件的过程中，可以为预留的 <slot> 插槽绑定props 数据，这种带有props 数据的 <slot> 叫做“作用域插槽”。

但是在开发过程中一定要灵活运用，毕竟代码是死的，人是活的。

OK那么，Vue中插槽的使用就到这里。

感谢浏览。

vue核心基础-插槽

参考技术A 1.1什么是插槽?
默认情况下使用子组件时在子组件中编写的元素是不会被渲染的
如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽
插槽就是在子组件中放一个"坑", 以后由父组件来"填"

1.2什么是匿名插槽
没有名字的插槽, 会利用使用时指定的能容替换整个插槽

2.1什么是具名插槽
默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份
这导致了所有插槽中填充的内容都是一样的
那么如果我们想给不同的插槽中填充不同的内容怎么办呢?
这个时候就可以使用具名插槽

2.2具名插槽使用
通过插槽的name属性给插槽指定名称
在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽

3.1什么是v-slot指令?
v-slot指令是Vue2.6中用于替代slot属性的一个指令
在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽
从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽

4.1什么是作用域插槽
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据

4.2如何使用作用域插槽
4.2.1在slot中通过 v-bind:数据名称="数据名称" 方式暴露数据
4.2.2在父组件中通过 <template slot-scope="作用域名称"> 接收数据
4.2.3在父组件的<template></template>中通过 作用域名称.数据名称 方式使用数据

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope

也就是说我们除了可以通过v-slot指令告诉Vue内容要填充到哪一个具名插槽中
还可以通过v-slot指令告诉Vue如何接收作用域插槽暴露的数据

v-slot:插槽名称="作用域名称"