首页 > 其他分享 >Vue 插槽

Vue 插槽

时间：2023-03-10 14:36:31浏览次数：32  
标签：Category Vue 插槽 App vue 组件 ###

Vue 插槽

  • 环境准备(就一个 分类组件)

    ### Category.vue
<template>
	<div class="category">
		<h3>xxx分类</h3>
		<ul>
			<li>11111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Category'
	}
</script>

<style scoped>
	h3 {
		color: orange;
		text-align: center;
	}
	ul {
		margin-left: 40px;
	}
	.category {
		background: skyblue;
		width: 200px;
		height: 300px;
	}
</style>

### App.vue

<template>
  <div class="container">
    <Category/> <!--使用3次-->
    <Category/>
    <Category/>
  </div>
</template>

<script>

import Category from './components/slot/Category.vue'

export default {
  name: 'App',
  components: {
	  Category,
  }
  
}
</script>

<style>
	.container {
		display: flex;
		justify-content: space-around;
		
	}
</style>

  • 把list数据放在App中,父组件向子组件传值,现在这么搞

    ### app.vue

<template>
  <div class="container">
    <!--传两组数据: title && listData-->
    <Category title='foods' :listData="foods" />
    <Category title='films' :listData="films" />
    <Category title='games' :listData="games" />
  </div>
</template>

<script>

import Category from './components/slot/Category.vue'

export default {
  name: 'App',
  components: {
	  Category,
  },
  data(){
	  return {
	  	  // 已准备好的数据
		  foods:['banana','apple','pear'],
		  films:['Speed Star','Harry Polly','Ship'],
		  games:['cross fire','asktao','QQSpeed']
	  }
  }
  
}
</script>

<style>
	......
</style>

### Category.vue
<template>
	<!--渲染数据-->
	<div class="category">
		<h3>{{title}}</h3> 
		<ul>
			<li v-for="(item,index) in listData" :key="index">{{item}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title','listData'] // 接收
	}
</script>

<style scoped>
	......
</style>


- 至此,第一种效果完成,没什么可以讲的

  • 现在,改变需求,Foods列表项变成一张图片,Films列表项变成一个视频,Games不变

    可以这么干,添加一个判断条件即可

    ### Category.vue
<template>
	<div class="category">
		<h3>{{title}}</h3>
		<ul v-show="title !== 'Foods' && title !== 'Films' "> <!--添加判断-->
			<li v-for="(item,index) in listData" :key="index">{{item}}</li>
		</ul>
		<!--两个判断-->
		<img v-show="title == 'Foods' " src="https://img1.baidu.com/it/u=1294439722,116143144&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" >
		<img  v-show="title == 'Films' " src="https://img2.baidu.com/it/u=2281104515,2554096595&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714" >
	</div>
</template>

  • 如果项目需求少,这种方式没有问题.但缺点也很明显,一旦列表项多了,处理起来繁琐,得一个个去判断,很耗时间

    现在使用'Vue提供的插槽'来实现这一需求(插槽就是'占坑',等待组件的使用者[可以理解为父组件]填坑)

    ### App.vue

<template>
  <div class="container">
	
    <!--不再传listData-->
    <!-- <Category title='Foods' :listData="foods"> -->
    <!--Category组件里面包裹html元素,这里包裹图片-->
    <Category title='Foods'>
		<img src="https://img1.baidu.com/it/u=1294439722,116143144&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" >
	</Category>
	
	<!--这里包裹视频-->
    <Category title='Films'>
		<video controls src="https://xxx.mp4"></video>
	</Category>
	
	<!--这里渲染数据-->
    <Category title='Games'>
		<ul>
			<!-- <li v-for="(item,index) in listData" :key="index">{{item}}</li> -->
			<li v-for="(item,index) in games" :key="index">{{item}}</li>
		</ul>
	</Category>
  </div>
</template>

<script>

import Category from './components/slot/Category.vue'

export default {
  name: 'App',
  components: {
	  Category,
  },
  data(){
	  return {
		  foods:['banana','apple','pear'],
		  films:['Speed Star','Harry Polly','Ship'],
		  games:['cross fire','asktao','QQSpeed']
	  }
  }
  
}
</script>

<style>
	.container {
		display: flex;
		justify-content: space-around;
		
	}
	video {
		width: 100%;
	}
</style>


### Category.vue
<template>
	<div class="category">
		<h3>{{title}}</h3>
		<!--如果父组件有传数据(html结构)过来,就展示数据;如果没传,就展示默认的数据-->
		<!--占坑,等待接收数据-->
		<slot>我是一些默认值(没传值的时候我就显示)</slot>
		
		
	</div>
</template>

<script>
	export default {
		name:'Category',
		// props:['title','listData'] // 不再接收 ListData
		props:['title']
	}
</script>

<style scoped>
	......
</style>

  • 至此,插槽的用途就是: 复用组件的时候,利用插槽可以渲染不同的数据结构(多数据的时候用起来很方便,数据少就使用If判断即可)

具名插槽演示(上面的基础上,取个名字而已,以便插入不同的数据结构)

### Category.vue
<template>
	<div class="category">
		<h3>{{title}}</h3>
		<!--就加了一个name属性-->
		<slot name="center">我是一些默认值(没传值的时候我就显示center)</slot>
		<slot name="footer">我是一些默认值(没传值的时候我就显示footer)</slot>
		
	</div>
</template>

### App.vue
<template>
  <div class="container">
	  
    <Category title='Foods'>
    	<!--把img标签结构插入center插槽-->
		<img slot="center" src="https://img1.baidu.com/it/u=1294439722,116143144&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" >
		<!--把a标签结构插入footer插槽-->
		<a slot="footer" href="">美食连接</a>
	</Category>
	
	<!--以下同理-->
    <Category title='Films'> 
		<video slot="center" controls src="...mp4"></video>
		<a slot="footer" href="">电影连接</a>
		<a slot="footer" href="">yyy连接</a>
	</Category>
	
    <Category title='Games'>
		<ul slot="center">
			<!-- <li v-for="(item,index) in listData" :key="index">{{item}}</li> -->
			<li v-for="(item,index) in games" :key="index">{{item}}</li>
		</ul>
		<a slot="footer" href="">游戏连接</a>
	</Category>
  </div>
</template>

  • 往一个插槽插入多个数据结构,可以这么搞

    - 写法一:多次使用

### App.vue
......
<Category title='Films'>
		......
		<!--使用多次-->
		<a slot="footer" href="">电影连接</a>
		<a slot="footer" href="">yyy连接</a>
</Category>

- 写法二: 使用 <template slot>
......
<Category title='Films'>
		<template slot="footer"> <!--slot属性写在template里-->
			<a href="">电影连接</a>
			<a href="">yyy连接</a>
		</template>
</Category>

- 写法三: 使用<template v-slot>,这是新的写法
......
<Category title='Films'>
		<!-- <template slot="footer"> -->
		<template v-slot:footer>
			<a href="">电影连接</a>
			<a href="">yyy连接</a>
		</template>
</Category>

插槽作用域

  • 环境准备(Category渲染三个list,数据源要求在Category中,要求三个list的css样式不一样)
### App.vue

<template>
  <div class="container">
	  
	<!--渲染三组list-->  
	<Category title='Games'></Category>
	
	<Category title='Games'></Category>
	
	<Category title='Games'></Category>
	
  </div>
</template>

<script>

import Category from './components/slot/Category.vue'

export default {
  name: 'App',
  components: {
	  Category,
  },
  data(){
	  return {
		  // 不再返回数据
	  }
  }
  
}
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: space-around;
		
	}
	
</style>

### Category
<template>
	<div class="category">
		<h3>{{title}}</h3>
		<!--渲染数据-->
		<ul>
			<li v-for="(game,index) in games" :key="index">{{game}}</li>
		</ul>
		
		
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data(){
			  return {
				  games:['cross fire','asktao','QQSpeed'] // 数据放在这
			  }
		}
	}
</script>

<style scoped>
	h3 {
		font-weight: bold;
		background: orange;
		text-align: center;
	}
	ul {
		margin-left: 40px;
	}
	img {
		width: 100%;
	}
	.category {
		background: skyblue;
		width: 200px;
		height: 300px;
	}
	a {
		display: inline-block;
		width: 168px;
		text-align: center;
	}
	video {
		width: 100%;
	}
</style>
  • 直接上代码
### Cagegory.vue
<template>
	<div class="category">
		<h3>{{title}}</h3>
		<!--把games数据传给组件使用者(父组件)-->
		<slot :games="games">我是默认值</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data(){
			  return {
				  games:['cross fire','asktao','QQSpeed'] // 数据源
			  }
		}
	}
</script>

<style scoped>
	......
</style>

### App.vue

<template>
  <div class="container">
	
	<Category title='Games'>
	    <!--想要接收数据,必须使用template包裹起来-->
	    <!--使用scope属性来接收子组件传过来的数据-->
	    <!--该数据是一个对象(字典)-->
		<template scope="dataObj">
			<!-- {{dataObj}} -->
			<!--dataObj.games对应子组件的list-->
			<ul>
				<li v-for="(game,index) in dataObj.games" :key="index">{{game}}</li>
			</ul>
		</template>
	</Category>
	
	<Category title='Games'>
	    <!--也可以使用es6的写法-->
		<template scope="{games}">
			<ol>
				<!--上面是遍历dataObj.games,这里遍历games即可-->
				<li v-for="(game,index) in games" :key="index">{{game}}</li>
			</ol>
		</template>
		
	</Category>
	
	<Category title='Games'>
		<!--还可以这么写,新的写法-->
		<template slot-scope="{games}">
			<h4 v-for="(game,index) in games" :key="index">{{game}}</h4>
		</template>
	</Category>
	
  </div>
</template>

<script>

import Category from './components/slot/Category.vue'

export default {
  name: 'App',
  components: {
	  Category,
  },
 
}
</script>

<style scoped>
	......
	
</style>

插槽小结

  • 作用: 让父组件可以向子组件指定位置插入html结构,也是组件之间的一种通信方式

    适用于父组件==>子组件

  • 分类: 默认插槽/具名插槽/作用域插槽

  • 使用方式1: 默认插槽

    - 父组件中:
	<Category>
		<div>html结构</div>
	</Category>
	
- 子组件中:

	<template>
		<div>
			<!--定义插槽-->
			<slot>插槽默认内容</slot>
		</div>
	</template>

  • 使用方式2:具名插槽

    - 父组件中:
	<Category>
		<template slot="center">
            <div>html结构</div>
        </template>
	</Category>
	
- 子组件中:

	<template>
		<div>
			<!--定义插槽-->
			<slot name="center">插槽默认内容</slot>
		</div>
	</template>

  • 使用方式3:作用域插槽

    - 理解: 数据在组件的自身,但根据数据生成的结构 需要组件使用者来决定(父组件决定).
  例如: games数据在Cagegory组件中,但使用数据所遍历出来的结构由App组件决定

    ### App.vue
<Category title='Games'>
		<template scope="dataObj">
			<ul>
				<li v-for="(game,index) in dataObj.games" :key="index">{{game}}</li>
			</ul>
		</template>
	</Category>
	
	<Category title='Games'>
		<template scope="{games}">
			<ol>
				<li v-for="(game,index) in games" :key="index">{{game}}</li>
			</ol>
		</template>
		
	</Category>
	
### Category.vue
<template>
	<div class="category">
		<h3>{{title}}</h3>
		<slot :games="games">我是默认值</slot>
	</div>
</template>

标签：Category,Vue,插槽,App,vue,组件,###
From： https://www.cnblogs.com/qinganning/p/17203219.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99