slot插槽

最新推荐文章于 2024-09-09 09:21:31 发布

@gaoyanfeng

最新推荐文章于 2024-09-09 09:21:31 发布

阅读量530

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/GYF_123/article/details/114237788

vue 专栏收录该内容

15 篇文章

订阅专栏

slot简单的说就是父组件想在要往子组件里面插入一点内容

slot分为三种：基本使用、作用域插槽、具名插槽

基本使用：

<!-- 父组件 -->
<template>
	<div>
		<!-- 子组件 -->
		<SlotDemo :url="website.url">
			{{website.title}}
		</SlotDemo>
	</div>
</templte>

<script>
	import SlotDemo from "./SlotDemo";
	export default {
		components:{
			SlotDemo
		},
		data(){
			return{
				name:"哈哈",
				website:{
					url:"www.baidu.com",
					title:'0v0',
					subTitle:"程序员的梦工厂"
				}
			}
		}
	}
</script>

<!-- 子组件 -->
<template>
		<a :href="url">
			<slot>
			   默认内容,父组件没有设置内容的时候，这里显示
			</slot>
		</a>
</templte>

<script>
	export default {
		props:['url'], //这是属性的一个简写
		data(){
		return{ 

		}
	  }
	}
</script>

作用域插槽:

<!-- 父组件 -->
<template>
	<div>
		<!-- 子组件 -->
		<ScopedSlotDemo :url="website.url">
		<!--slotProps这个名字是可以自己定义的-->
			<template v-slot="slotProps">
				{{slotProps.slotData.title }}
			</template>
		</ScopedSlotDemo>
	</div>
</templte>

<script>
	import ScopedSlotDemo from "./SlotDemo";
	export default {
		components:{
			ScopedSlotDemo
		},
		data(){
			return{
				name:"哈哈",
				website:{
					url:"www.baidu.com",
					title:'0v0',
					subTitle:"程序员的梦工厂"
				}
			}
		}
	}
</script>

<!-- 子组件 -->
<template>
		<!--slotData这个名字是可以自己定义的-->
		<a :slotData="website">
			<slot>
			   默认内容,父组件没有设置内容的时候，这里显示
			</slot>
		</a>
</templte>

<script>
	export default {
		props:['url'], //这是属性的一个简写
		data(){
		return{ 
			website:{
				url:"www.zizujian.com",
				title:'mom',
				subTitle:"子组件website"
			}
		}
	  }
	}
</script>

具名插槽：

	<!-- 父组件 -->
	
	<NamedSlot>
		<!-- 缩写的话就是 <template #header> -->
		<template v-slot:header>
			<h1>请插入 header slot 中</h1>
		</template>
		
		<p>将插入到main slot 中,即未命名的 slot</p>

		<template v-slot:footer>
			<h1>请插入 footer slot 中</h1>
		</template>
	</NamedSlot>

<!-- NamedSlot组件 -->
<div class="container">
	<header>
		<slot name="header"></slot>
	</header>
	<mian>
		<slot></slot>
	</mian>
	<footer>
		<slot name="footer"></slot>
	</footer>
</div>