Vue的Slot插槽的使用

最新推荐文章于 2022-12-23 16:11:46 发布

苦涩精灵

最新推荐文章于 2022-12-23 16:11:46 发布

阅读量113

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/weixin_43873198/article/details/117603203

版权

vue js html

Web 专栏收录该内容

118 篇文章 10 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<script src="js/vue.js"></script>
		<title>Vue的Slot的使用</title>
	</head>
	<body>
		<div id="app">
			<Test>
				<div slot="header">头部</div>
				<div slot="footer">尾巴</div>
			</Test>
		</div>

		<template id="test">
			<div>
				<slot name="header"></slot>
				<h3>想要插入的组件1</h3>
				<h3>想要插入的组件2</h3>
				<h3>想要插入的组件3</h3>
				<slot name="footer"></slot>
			</div>
		</template>
	</body>
	<script>
		Vue.component("Test", {
			template: "#test"
		})

		new Vue({
			el: "#app"
		})
	</script>
	</body>
</html>