vue 05 day(插槽)

Vue

vue插槽

插槽（slot）是vue提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显示不显示、怎样显示，都是由父组件进行控制的，而插槽在哪里显示就由子组件来进行控制

组件插槽

<div id="app">
		<son>
			<p>这是插槽</p>
		</son>
	</div>
	<template id="tem1">
		<div >
			<p>jhsjkchsjhcj</p>
			<slot>这是默认的 插槽值</slot>
		</div>
	</template>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('son',{
			template:"#tem1"
		})	
		
		
		var  vm =new Vue({
			el:"#app",
			data:{
				
			}
		})
	</script>

具名插槽

第一种方法

<div id="app">
		<son>
			<p slot="header">这是有头部名字的插槽</p>
			<p>这是没有名字的默认插槽</p>
			<p slot="footer">这是有尾部名字的插槽	</p>
		</son>
	</div>
	<template id="tem1">
		<div >
			<p>jhsjkchsjhcj</p>
			<slot name="header"></slot>
			<slot></slot>
			<slot name="footer"></slot>
		</div>
	</template>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('son',{
			template:"#tem1"
		})	
		
		
		var  vm =new Vue({
			el:"#app",
			data:{
				
			}
		})
	</script>

第二种方法

<div id="app">
		<son>
		//template只是临时包裹，并不会被渲染到网页中
			<template slot="header">
				<p>这是有头部名字的插槽</p>
				<p>这是有头部名字的插槽1</p>
			</template>
			<template>
				<p>这是没有名字的默认插槽</p>
				<p>这是没有名字的默认插槽1</p>
				<p>这是没有名字的默认插槽2</p>
			</template>
			<template slot="footer">
				<p>这是有尾部名字的插槽</p>
				<p>这是有尾部名字的插槽1</p>
				<p>这是有尾部名字的插槽2</p>
			</template>
			
		</son>
	</div>
	<template id="tem1">
		<div >
			<slot name="header"></slot>
			<slot></slot>
			<slot name="footer"></slot>
		</div>
	</template>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('son',{
			template:"#tem1"
		})	
		
		
		var  vm =new Vue({
			el:"#app",
			data:{
				
			}
		})
	</script>

作用域插槽

子组件给父组件传值

<div id="app">
			<son >
				<template slot-scope="slotProps">
					<!-- 在这里就可以在父组件中对这个列表进行各种操作比如加颜色高亮之类的 -->
				{{slotProps.info}}
				</template>
			</son>
		</div>
		<template id="tem1">
			<div>
				<slot :info="msg">{{msg}}</slot>
			</div>
		</template>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('son', {
				template: "#tem1",
				data() {
					return{
					msg:"这是子组件的值"
					}
				}
			})


			var vm = new Vue({
				el: "#app",
				data: {
				
				}
			})
		</script>

普通的父组件传值给子组件

<div id="app">
			<son :father="list" >
				<template >

				</template>
			</son>
		</div>
		<template id="tem1">
			<div>
				<li :key="item.id" v-for="item in father">{{item.name}}</li>
			</div>
		</template>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('son', {
				props:["father"],
				template: "#tem1",
				data() {
					return{
						
					}
				}
			})


			var vm = new Vue({
				el: "#app",
				data: {
				list:[
					{id:1,name:"xiaoming"},
					{id:2,name:"xiaohong"},
					{id:3,name:"hongjpng"}
				]
				}
			})
		</script>

父组件传值给子组件，又在父组件中修改子组件 的样式

<div id="app">
			<son :father="list" >
				<template slot-scope="slotProps">
					<!-- 在这里就可以在父组件中对这个列表进行各种操作比如加颜色高亮之类的 -->
				{{slotProps.info.name}}
				</template>
			</son>
		</div>
		<template id="tem1">
			<div>
				<li :key="item.id" v-for="item in father">
					<slot :info="item">{{item.name}}</slot>
				</li>
			</div>
		</template>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('son', {
				props:["father"],
				template: "#tem1",
				data() {
					return{
						
					}
				}
			})


			var vm = new Vue({
				el: "#app",
				data: {
				list:[
					{id:1,name:"xiaoming"},
					{id:2,name:"xiaohong"},
					{id:3,name:"hongjpng"}
				]
				}
			})
		</script>

v-slot

提示：在vue2.6版本开始，使用v-slot代替slot和slot-scope，slot和slot-scope已经废弃，暂时，仍旧可以使用（vue3 的语法 v-slot）

<div id="app">
			<son >
				<template v-slot="">
					<!-- 在这里就可以在父组件中对这个列表进行各种操作比如加颜色高亮之类的 -->
				<p>{{msg}}</p>
				</template>
			</son>
		</div>
		<template id="tem1">
			<div>
				<slot name="sonmsg">{{msg}}</slot>
			</div>
		</template>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('son', {
				template: "#tem1",
				data() {
					return{
					msg:"这是子组件的值"
					}
				}
			})


			var vm = new Vue({
				el: "#app",
				data: {
				
				}
			})
		</script>