Vue插槽的使用

在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" height="600" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" row-dblclick="showUP">
            <el-table-column fixed type="selection" width="55"> </el-table-column>
            <el-table-column sortable fixed label="名称" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <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中插槽的使用就到这里。

感谢浏览。