十、Vue-具名插槽的使用

时间 2020-08-10 标签 vue 具名插槽使用

十、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>