Vue 插槽

最新推荐文章于 2025-07-31 16:12:34 发布

yume_sibai

最新推荐文章于 2025-07-31 16:12:34 发布

阅读量1.9k

点赞数 59

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_78939167/article/details/149667555

作用：让父组件可以向子组件指定位置插入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>