vue中的插槽（slot）15

最新推荐文章于 2024-05-08 08:36:23 发布

百味皆苦

最新推荐文章于 2024-05-08 08:36:23 发布

阅读量209

点赞数

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

本文链接：https://blog.csdn.net/qq_36925536/article/details/91385374

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的插槽（slot）</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 使用插槽slot可以接收到父组件传递给子组件的dom元素，当没有传递dom元素时还可以定义默认值 -->
		<!-- vue中的具名插槽 -->
		<div id="app">
			<body-content>
				<!-- 1：定义两个具名插槽，名字分别叫header和footer -->
				<div class="header" slot="header">header111</div>
				<div class="footer" slot="footer">footer111</div>
			</body-content>
		</div>
		<script>
			Vue.component('body-content',{
				template: `<div>
				<!-- 2：使用上面的插槽，如果没有这个名字的插槽则显示默认内容 -->
								<slot name='header'></slot>
								<div class='content'>content</div>
								<slot name='footer'></slot>
								<slot name='default'><h1>default slot</h1></slot>
							</div>`
			})
			var vm=new Vue({
				el:'#app'
			})
		</script>
		<!-- 最终效果：
		header111
		content
		footer111
		default slot
		 
		 -->
		 
		 
		<!-- ---------------------------------------------------------------------------------- -->
		<p>分割线--------------------------------------------------------------------------------</p>
		<!-- vue中的作用域插槽 -->
		<div id="app2">
			<child1>
				<!-- 1：给子组件传递插槽，外部必须套用一层template，然后把组件中传来的数据存储在props中，使用差值表达式输出 -->
				<template slot-scope="props">
					<h1>{{props.item}}</h1>
				</template>
			</child1>
		</div>
		<script>
			Vue.component('child1',{
				data:function(){
					return{
						list:[1,2,3,4]
					}
				},
				
				template:`<div>,
							<ul>
								/* 2：处理父组件传过来的dom元素，然后遍历 */
								<slot v-for='item of list' :item=item></slot>
							</ul>
						 </div>`
			})
			var v=new Vue({
				el:'#app2'
			})
		</script>
		<!-- 最终效果：
		1
		2
		3
		4
		 
		 -->
	</body>
</html>

百味皆苦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的插槽（slot）15

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue中的插槽（slot）</title> <script src="vue.js"></script> </head> <body> ...
复制链接

扫一扫