当前位置：首页 > news >正文

Vue 插槽

news 2025/7/27 7:43:00

作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，适用于父组件==>子组件。

一、默认插槽

使用方式：

父组件：

                <xxxx>
                        <div>html结构</div>
                </xxxx>

子组件：

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

/*    App.vue    */
<template><div class="container"><Category title="foods"><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""></Category><Category title="games"><ul><li v-for="(item,index) in games" :key="index">{{ item }}</li></ul></Category><Category title="films"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>import Category from './Components/Category'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']}},}
</script><style>.container{display: flex;justify-content: space-around;}img,video{width: 100%;}
</style>

/*    Category.vue    */
<template><div><h2>{{ title }}</h2><slot></slot></div>
</template><script>export default {name:'Category',props:['title','listData']}
</script><style lang="less" scoped>div{width: 200px;height: 300px;background-color: skyblue;}h2{text-align: center;background-color: orange;}
</style>

二、具名插槽

使用方式：

父组件：

                <xxxx>
                        <template slot="center">
                                <div>html结构1</div>
                        </template>
                         <template slot="footer">
                                <div>html结构2</div>
                         </template>
                </xxxx>

子组件：

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

/*    App.vue    */
<template><div class="container"><Category title="foods"><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a class="foot" slot="footer" href="http://www.baidu.com">更多美食</a></Category><Category title="games"><ul slot="center"><li v-for="(item,index) in games" :key="index">{{ item }}</li></ul><div slot="footer" class="foot"><a href="http://www.baidu.com">单机游戏</a><a href="http://www.baidu.com">网络游戏</a></div></Category><Category title="films"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><div class="foot"><a href="http://www.baidu.com">经典</a><a href="http://www.baidu.com">热门</a><a href="http://www.baidu.com">推荐</a></div><h4>欢迎前来观影</h4></template></Category></div>
</template><script>import Category from './Components/Category'export default {name:'App',components:{Category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']}},}
</script><style>.container,.foot{display: flex;justify-content: space-around;}img,video{width: 100%;}h4{text-align: center;}a{padding-top: 10px;}
</style>

/*    Category.vue    */
<template><div class="main"><h2>{{ title }}</h2><slot name="center"></slot><slot name="footer"></slot></div>
</template><script>export default {name:'Category',props:['title','listData']}
</script><style lang="less" scoped>.main{width: 200px;height: 300px;background-color: skyblue;}h2{text-align: center;background-color: orange;}
</style>

三、作用域插槽

1.理解：数据在组件的自身，但根据数据生成的结构需要组建的使用者来决定。

2.使用方法：

父组件：

<xxxx>
<template scope="scopeData">
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</xxxx>
<xxxx>
<template slot-scope="scopeData">
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</xxxx>

子组件：

<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>

/*    App.vue    */
<template><div class="container"><Category title="games"><template slot-scope="{games}"><ul><li v-for="(item,index) in games" :key="index">{{ item }}</li></ul></template></Category><Category title="games"><template slot-scope="{games}"><ol><li v-for="(item,index) in games" :key="index">{{ item }}</li></ol></template></Category><Category title="games"><template slot-scope="{games}"><h4 v-for="(item,index) in games" :key="index">{{ item }}</h4></template></Category></div>
</template><script>import Category from './Components/Category'export default {name:'App',components:{Category},}
</script><style>.container,.foot{display: flex;justify-content: space-around;}img,video{width: 100%;}h4{text-align: center;}a{padding-top: 10px;}
</style>

/*    Category.vue    */
<template><div class="main"><h2>{{ title }}</h2><slot :games="games"></slot></div>
</template><script>export default {name:'Category',data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽'],}},props:['title','listData']}
</script><style lang="less" scoped>.main{width: 200px;height: 300px;background-color: skyblue;}h2{text-align: center;background-color: orange;}
</style>

查看全文

http://www.dtcms.com/a/299609.html