九、Vue中使用插槽(slot)、聚类插槽

一、基本的插槽

这里总结两点

  • 如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示
  • (插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容
	slot 代表 父组件往子组件中 插入的标签
	 这里就代表 组件子组件中的	<p>Dell</p>
			<child>
				<p>Dell</p>
			</child>

	这里如果是这样的
		<child>
		</child>	
	就会显示 <slot>默认内容</slot>中的	
	 	默认内容	

二、聚类插槽

1、如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示
2、(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 
			这里如果是这样的
				<child>
				</child>	
			就会显示 <slot>默认内容</slot>中的	
				默认内容	
3、聚类插槽
			子组件这么写:
				template:`<div>
					<slot>默认内容</slot>
					<p>content</p>
					<slot>默认内容</slot>
				  </div>`	
			然后这么引用:
					<child>
						<div>header</div>
						<div>footer</div>
					</child>
			就会发现结果是
				header
				footer
				content

				header
				footer
			这个不是我的本意,那么怎么办,这里就引入了聚类插槽
			子组件:
				template:`<div>
						<slot name='header'>默认内容</slot>
						<p>content</p>
						<slot name='footer'>默认内容</slot>
					  </div>`
			子组件引用:
				<child>
					<div slot='header'>header</div>
					<div slot='footer'>footer</div>
				</child>
			不难发现给每个想要指定的子组件插槽添加 name属性,
			然后在引用中 slot中明确 是哪个即可
			也可以理解为引用中是用了两个插槽
			同时,默认内容同时适用在每个插槽

这个是普通插槽的Demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue中使用插槽(slot)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- 
			1、如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示
			2、(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 
			这里如果是这样的
				<child>
				</child>	
			就会显示 <slot>默认内容</slot>中的	
				默认内容	
		-->
		<child>
			<p>Dell</p>
		</child>
	</div>

	<script type="text/javascript">
		Vue.component('child',{
			/* slot 代表 父组件往子组件中 插入的标签 这里就代表 组件子组件中的 <p>Dell</p> <child> <p>Dell</p> </child> */
			template:`<div> <slot>默认内容</slot> </div>`
		});

		var vm = new Vue({
			el:'#root',

		});
	</script>
</body>
</html>

这个是聚类插槽的Demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue中使用插槽(slot)</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- 
			1、如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示
			2、(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 
			这里如果是这样的
				<child>
				</child>	
			就会显示 <slot>默认内容</slot>中的	
				默认内容	
			3、聚类插槽
			子组件这么写:
				template:`<div> <slot>默认内容</slot> <p>content</p> <slot>默认内容</slot> </div>`	
			然后这么引用:
					<child>
						<div>header</div>
						<div>footer</div>
					</child>
			就会发现结果是
				header
				footer
				content

				header
				footer
			这个不是我的本意,那么怎么办,这里就引入了聚类插槽
			子组件:
				template:`<div> <slot name='header'>默认内容</slot> <p>content</p> <slot name='footer'>默认内容</slot> </div>`
			子组件引用:
				<child>
					<div slot='header'>header</div>
					<div slot='footer'>footer</div>
				</child>
			不难发现给每个想要指定的子组件插槽添加 name属性,
			然后在引用中 slot中明确 是哪个即可
			也可以理解为引用中是用了两个插槽
			同时,默认内容同时适用在每个插槽

		-->
		<child>
			<div slot='header'>default header</div>
			<div slot='footer'>default footer</div>
		</child>
	</div>

	<script type="text/javascript">
		Vue.component('child',{
			/* slot 代表 父组件往子组件中 插入的标签 这里就代表 组件子组件中的 <p>Dell</p> <child> <p>Dell</p> </child> */
			template:`<div> <slot name='header'>默认内容</slot> <p>content</p> <slot name='footer'>默认内容</slot> </div>`
		});

		var vm = new Vue({
			el:'#root',

		});
	</script>
</body>
</html>

三、作用域插槽

全部评论

相关推荐

07-18 14:34
门头沟学院 Java
感觉招聘要求好高,这都是招什么人才
电气电子小朋友:你都说了这是大疆,无人机顶级企业,薪资30k-50k,要求高是正常的
点赞 评论 收藏
分享
07-11 22:27
中南大学 Java
程序员牛肉:学历的话没问题。但是没问题的也就只有学历了。 其实你的整体架构是正确的,博客接着干。但是项目有点过于简单了。从后端的角度上讲,你这也就是刚入门的水平,所以肯定约面试够呛。 如果你要应聘后端岗位,那你第一个项目竟然是仿写操作系统。这个你要面试官咋问你。你一定要记住一点,你简历上写的所有的东西,都是为了证明你有能力胜任当前的岗位,而不是为了证明你自己会什么。 如果你只是浅浅的做几个项目,描述也都是烂大街。技术点也都是各种混水类的配置类需求,那你就不要幻想自己能走多远。一定要保持思考,保持学习。
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务