Vue—插槽

最新推荐文章于 2025-10-02 05:50:22 发布

原创最新推荐文章于 2025-10-02 05:50:22 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue学习专栏收录该内容

63 篇文章

订阅专栏

本文详细介绍了Vue中的插槽概念及其三种类型：默认插槽、具名插槽和作用域插槽。通过实例展示了如何在父组件和子组件之间传递结构和数据。

## 插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red">父组件 ===> 子组件</strong> 。

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

1. 默认插槽：

```vue

父组件中：

<div>html结构1</div>

</Category>

子组件中：

<div>

<slot>插槽默认内容...</slot>

</div>

</template>

```

2. 具名插槽：

```vue

父组件中：

<templateslot="center">

<div>html结构1</div>

</template>

<templatev-slot:footer>

<div>html结构2</div>

</template>

</Category>

子组件中：

<div>

<slot name="center">插槽默认内容...</slot>

<slot name="footer">插槽默认内容...</slot>

</div>

</template>

```

3. 作用域插槽：

1. 理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

2. 具体编码：

```vue

父组件中：

<templatescope="scopeData">

<ul>

</ul>

</template>

</Category>

<templateslot-scope="scopeData">

<h4v-for="g in scopeData.games" :key="g">{{g}}</h4>

</template>

</Category>

子组件中：

<div>

</div>

</template>

exportdefault {

name:'Category',

props:['title'],

//数据在子组件自身

data() {

return {

games:['红色警戒','穿越火线','劲舞团','超级玛丽']

}

</script>

```

默认插槽



Category.vue:


<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <!-- <ul>
            <li v-for="(item,index) in listData" :key="index">{{ item }}</li>
        </ul> -->
        <!--slot:定义一个插槽-->
        <!--组件标签的插槽放在这里-->
        <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>
<script>
export default {
    name:'C-category',
    props:['title']
}
</script>
<style>
    .category{
        background-color: pink;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: yellow;    
    }
    image{
        width: 100%;
        height: auto;
    }
</style>

App.vue:


<template>
    <div class="container">
        <category title="美食" >
            <img src="https://img1.baidu.com/it/u=3282457405,235959913&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
        </category>
        <category title="游戏" :listData="games">
            <ul>
                <li v-for="(item,index) in games" :key="index">{{ item }}</li>
            </ul>
        </category>
        <category title="电影" :listData="films">
            <!--control：表示是否可以播放-->
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </category>
    </div>
</template>
<script>
    import category from './components/Category.vue'
    export default {
        name:'App',
        components:{category},
        data(){
            return{
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
            }
        }
    }
</script>
<style scoped>
    .container{
        display: flex;
        justify-content: space-around;
        
    }
    img{
        width: 100%;
    }
    
    video{
        width: 100%;
    }

具名插槽

Category.vue:


<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <!-- <ul>
            <li v-for="(item,index) in listData" :key="index">{{ item }}</li>
        </ul> -->
        <!--slot:定义一个插槽-->
        <!--组件标签的插槽放在这里-->
        <slot name="center"></slot>
        <slot name="footer"></slot>
    </div>
</template>
<script>
export default {
    name:'C-category',
    props:['title']
}
</script>
<style>
    .category{
        background-color: pink;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: yellow;    
    }
    image{
        width: 100%;
        height: auto;
    }
</style>

Category.vue:


<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <!-- <ul>
            <li v-for="(item,index) in listData" :key="index">{{ item }}</li>
        </ul> -->
        <!--slot:定义一个插槽-->
        <!--组件标签的插槽放在这里-->
        <slot name="center"></slot>
        <slot name="footer"></slot>
    </div>
</template>
<script>
export default {
    name:'C-category',
    props:['title']
}
</script>
<style>
    .category{
        background-color: pink;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: yellow;    
    }
    image{
        width: 100%;
        height: auto;
    }
</style>

作用域插槽

Category.vue:


<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!--通过slot传递参数games数组-->
        <slot :games="games" msg="hello">我是默认的一些内容</slot>
    </div>
</template>
<script>
    export default {
        name:'Category',
        props:['title'],
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            }
        },
    }
</script>
<style scoped>
    .category{
        background-color: pink;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: yellow;
    }
    video{
        width: 100%;
    }
    img{
        width: 100%;
    }
</style>

App.vue:


<template>
    <div class="container">
        <Category title="游戏">
            <!--这里的scope=“”可以随意写名字-->
            <template scope="Gui">
                <ul>
                    <li v-for="(g,index) in Gui.games" :key="index">{{g}}</li>
                </ul>
            </template>
        </Category>
        <Category title="游戏">
            <template scope="{games}">
                <ol>
                    <li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
                </ol>
            </template>
        </Category>
        <Category title="游戏">
            <template slot-scope="{games}">
                <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
            </template>
        </Category>
    </div>
</template>
<script>
    import Category from './components/Category'
    export default {
        name:'App',
        components:{Category},
    }
</script>
<style scoped>
    .container,.foot{
        display: flex;
        justify-content: space-around;
    }
    h4{
        text-align: center;
    }
</style>