10、Vue-具名插槽的使用

10、Vue-具名插槽的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘</title>
	</head>
	<body>
		<div id="app">

		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js">

	</script>

	<script type="text/javascript">
		/*
		<div class="container">
		  <header>
		    <!-- 我们希望把页头放这里 -->
		  </header>
		  <main>
		    <!-- 我们希望把主要内容放这里 -->
		  </main>
		  <footer>
		    <!-- 我们希望把页脚放这里 -->
		  </footer>
		</div>
		*/
		Vue.component('slot-name', {
			template: `
			<div>
				<slot name="header"></slot>
				
				<!--一个不带 name 的 <slot> 出口会带有隐含的名字“default”。-->
				<slot></slot>
				
				<slot name="footer"></slot>
			</div>
		   `
		})
		
		new Vue({
			el: "#app",
			template: `
				<!--使用全局组件slot-name-->
				<slot-name>  
					<p slot='header'>页头</p>
					<p>内容</p>
					<p slot='footer'>页脚</p>
				</slot-name>
				
		   `
		});
	</script>
</html>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页