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>
相关推荐
徐小夕1 天前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing11251 天前
界面规范8-文字
前端·javascript·html
盛夏绽放1 天前
抽成独立组件库:微前端架构下公共组件共享的最佳实践
前端·有问必答
江拥羡橙1 天前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
qczg_wxg1 天前
高阶组件介绍
开发语言·javascript·react native·ecmascript
小菜全1 天前
打包 Uniapp
javascript·vue.js·html5
itslife1 天前
实现 Promise
前端·javascript
小鱼儿亮亮1 天前
canvas中常见问题的解决方法及分析,踩坑填坑经历
前端·canvas
一枚前端小能手1 天前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack
至善迎风1 天前
使用国内镜像源解决 Electron 安装卡在 postinstall 的问题
前端·javascript·electron