vue.js基础之在vue中使用插槽以及作用域插槽

最新推荐文章于 2023-01-31 17:52:09 发布

前端yyds无敌

最新推荐文章于 2023-01-31 17:52:09 发布

阅读量106

点赞数

分类专栏： vue.js 文章标签：作用域插槽

本文链接：https://blog.csdn.net/hdb2405474279/article/details/119494069

版权

vue.js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

详细参考官网：插槽 — Vue.js (vuejs.org)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在vue中使用插槽</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<chlid>
				<p slot='yi'>yi</p><!-- vue提供的slot（插槽） -->
				<p slot='er'>er</p>
			</chlid>
		</div>
		<script>
		Vue.component('chlid',{
			template:`<div>
			<slot name=yi></slot>
			<p>hello</p>
			<slot name=er></slot>
			</div>`
		})
		
		var app = new Vue({
			el:"#app"
		})
		</script>
	</body>
</html>

作用域插槽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作用域插槽</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<chlid>
				<template slot-scope="props"><!-- 固定写法 -->
					<h1>{{props.item}}</h1>
				</template>
			</chlid>
			</div>
		
		<script>
		Vue.component('chlid',{
			data:function(){
				return{
					list:[1,2,3,4]
				}
			},
			template:`<div>
			<ul>
			<slot v-for="item of list" :item=item></slot>
			</ul>
			</div>`
		})
		
		var app = new Vue({
			el:"#app"
		})
		</script>
	</body>
</html>