vue中使用插槽

最新推荐文章于 2024-08-21 20:18:11 发布

Pierce923

最新推荐文章于 2024-08-21 20:18:11 发布

阅读量591

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u013320881/article/details/82974355

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.为什么要创建插槽？

在这里插入图片描述

1.向子组件中传递数据时，会发生转义或多< div>标签问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue中的插槽</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<my-content>
			<div slot='header'>Header</div>
			<div slot='hello'>Hello</div>
		</my-content>
	</div>

	<script>
		Vue.component('my-content',{
			template: `<div>
							<slot name='header'></slot> 	//根据name显示数据
							<slot name='hello'>default</slot> 	//设置默认信息
					   </div>`
		})

		var vm = new Vue({
			el: '#app'
		})
	</script>
</body>
</html>

2.作用域中使用插槽

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue中作用域插槽</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<my-content>
			<template slot-scope="props"><!-- 子组件传递的item，放置在props空间中 -->
				<h1>{{props.item}}</h1>
				<span>{{props.item}}</span>
			</template>	
		</my-content>
	</div>	
	<script>
		Vue.component('my-content',{
			data: function(){
				return {
					list: [1,2,3]
				}
			},
			template: `<div>
							<ul>
								<slot 
									v-for="item of list"
									:item=item
								></slot>
							</ul>
							<slot></slot>
						</div>`
		})

		var vm = new Vue({
			el: '#app'
		})
	</script>
</body>
</html>