码迷,mamicode.com
首页 > 其他好文 > 详细

具名插槽

时间:2019-12-22 16:07:32      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:net   slot   type   string   component   template   ring   rip   class   

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
	<title>具名插槽</title>
</head>
<body>
	<div id="root">
		<child content="hello">
			<p class="header" slot="header">header</p>
			<p class="footer" slot="footer">footer</p>
		</child>
	</div>

	<script type="text/javascript">
		
		Vue.component(‘child‘,{
			props:{
				content:String,
			},
			template:`	<div>
							<slot name="header">
								<h1>default 默认值</h1>
							</slot>
							<p>{{this.content}}</p>
							<slot name="footer">3</slot>
						</div>`
		})

		var vm = new Vue({
			el:"#root",
		})
	</script>
</body>
</html>

  

  

具名插槽

标签:net   slot   type   string   component   template   ring   rip   class   

原文地址:https://www.cnblogs.com/xuwupiaomiao/p/12079980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!