Vue 插槽

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

一、默认插槽

使用方式:

父组件:

<xxxx>

<div>html结构</div>

</xxxx>

子组件:

<template>

<div>

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

</div>

</template>

javascript 复制代码
/*    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>
javascript 复制代码
/*    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>

javascript 复制代码
/*    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>
javascript 复制代码
/*    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>

javascript 复制代码
/*    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>
javascript 复制代码
/*    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>
相关推荐
cxr82817 分钟前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全40 分钟前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊1 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan3 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿3 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊3 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪4 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
吃饺子不吃馅4 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防5 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump5 小时前
前端部署工具 PinMe
运维·前端·开源