slot 插槽

最新推荐文章于 2024-06-21 09:55:16 发布

努力学习~冲鸭

最新推荐文章于 2024-06-21 09:55:16 发布

阅读量1.5k

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/keke11211/article/details/124610497

版权

vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

插槽也就是slot，是组件的一块HTML模板，这块模板显示不显示以及怎样显示由父组件来决定。

由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。

非插槽模板指的是html模板，指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；
插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。

1. 单个插槽 | 默认插槽 | 匿名插槽

不用设置name属性。单个插槽可以放置在组件的任意位置，一个组件中只能有一个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。

父组件：

<template>
    <div class="wrap">
        <h3>我是父组件</h3>
        <Child>
            <div>
                <div>第一行</div>
                <div>第二行</div>
                <div>第三行</div>
            </div>
        </Child>
    </div>
</template>
<script>
import Child from './child.vue'
export default {
    data() {
        return {};
    },
    components: { Child },
    created() {},
    methods: {}
};
</script>
<style lang="scss">
    .wrap {
        padding: 50px;
        background: rgb(225, 225, 225);
    }
</style>

子组件：

<template>
    <div class='child'>
        <h4>我是子组件</h4>
        <slot></slot>
    </div>
</template>
<script>

export default{
    data() {
        return {};
    },
    mounted(){},
    methods:{}
}
</script>
<style lang='scss'>
    .child {
        padding: 20px;
        background: rgb(180, 180, 180);
    }
</style>

效果图：

2. 具名插槽

带有名字的插槽，有一个name属性，具名的插槽可以在组件中出现多次，而之前的匿名插槽只能出现一次。

父组件：

<template>
    <div class="wrap">
        <h3>我是父组件</h3>
        <Child>
            <div class="box" slot="first">
                <div>first-第一行</div>
                <div>first-第二行</div>
                <div>first-第三行</div>
            </div>
            <div class="box" slot="second">
                <div>second-第一行</div>
                <div>second-第二行</div>
                <div>second-第三行</div>
            </div>
            <div class="box">
                <div>第一行</div>
                <div>第二行</div>
                <div>第三行</div>
            </div>
        </Child>
    </div>
</template>
<script>
import Child from './child.vue'
export default {
    data() {
        return {};
    },
    components: { Child },
    created() {},
    methods: {}
};
</script>
<style lang="scss">
    .wrap {
        padding: 50px;
        background: rgb(225, 225, 225);
        .box {
            padding: 10px;
        }
    }
</style>

子组件：

<template>
    <div class='child'>
        <h4>我是子组件</h4>
        <slot name="first"></slot>
        <slot name="second"></slot>
        <slot></slot>
    </div>
</template>
<script>

export default{
    data() {
        return {};
    },
    mounted(){},
    methods:{}
}
</script>
<style lang='scss'>
    .child {
        padding: 20px;
        background: rgb(180, 180, 180);
    }
</style>

效果图：

父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。

3. 作用域插槽 | 带数据插槽

作用域插槽实际上是带有数据的插槽，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里。

作用域插槽和单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式又包括内容的；而作用域插槽，父组件只需要提供一套样式（在确实用作用域插槽绑定的数据的前提下）。

父组件：

<template>
    <div class="wrap">
        <h3>我是父组件</h3>
        <Child>
            <div class="box" slot="first">
                <div>first-第一行</div>
                <div>first-第二行</div>
                <div>first-第三行</div>
            </div>
            <div class="box" slot="second">
                <div>second-第一行</div>
                <div>second-第二行</div>
                <div>second-第三行</div>
            </div>
            <div class="box">
                <div>第一行</div>
                <div>第二行</div>
                <div>第三行</div>
            </div>
            <template slot-scope="user">
                <ul>
                    <li v-for="item in user.listData" :key="item">{{item}}</li>
                </ul>
            </template>
        </Child>
    </div>
</template>
<script>
import Child from './child.vue'
export default {
    data() {
        return {};
    },
    components: { Child },
    created() {},
    methods: {}
};
</script>
<style lang="scss">
    .wrap {
        padding: 50px;
        background: rgb(225, 225, 225);
        .box {
            padding: 10px;
        }
    }
</style>

子组件：

<template>
    <div class='child'>
        <h4>我是子组件</h4>
        <slot name="first"></slot>
        <slot name="second"></slot>
        <slot></slot>
        <slot :listData="listData"></slot>
    </div>
</template>
<script>

export default{
    data() {
        return {
            listData: ['小张', '小王', '小刘', '小李', '小赵']
        };
    },
    mounted(){},
    methods:{}
}
</script>
<style lang='scss'>
    .child {
        padding: 20px;
        background: rgb(180, 180, 180);
    }
</style>

效果图：

以上效果可以看出，具名插槽可以多个，匿名插槽只能一个；

作用域插槽通常在el-table中比较常用到：scope.row 当前行的数据对象

<el-table :data="tableData" ref="multipleTable" border height="100%" v-loading="listLoading">
    <template slot="empty">
        <div class="tableEmptyData">暂无数据</div>
    </template>
    <el-table-column width="80" label="序号">
        <template slot-scope="scope">
            <span>{{columnIndex(scope.$index)}}</span>
        </template>
    </el-table-column>
    <el-table-column v-for="(col, index) in showColumns" :key="index" :label="col.label" :prop="col.prop" :min-width="col.minWidth" show-overflow-tooltip>
        <div class="gobyndsingle">
                {{ scope.row[scope.column.property] }}
            </div>
        </template>
    </el-table-column>
</table>