vue v-slot 小结

在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope这两个目前已经被废弃但是为被移除的特性。

使用

组件中

<template>
	<div class="header flex">
		<div class="flex_1 flex flex_y_center"><span @click="returnBtn"><slot name="left"></slot></span></div>
		<div class="flex_1 flex_center">{{aaa}}</div>
		<div class="flex_1 flex flex_y_center flex_x_right"><slot name="right" :right="right"></slot></div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				aaa:this.$route.meta.title,
				right: '实名'
			}
		},
		methods:{
			returnBtn(){
				this.$emit("returnBtn",'123')
			}
			
		}
	}
</script>

<style>
	.header{
		width: 100%;
		height: 50px;
		background: #CCCCCC;
	}
</style>

页面中

<headerNav @returnBtn="returnBtn">
	<template v-slot:left>
		返回
	</template>
	<template v-slot:right="slotProps">
		{{slotProps.right}}
	</template>
</headerNav>