在Vue中使用插槽(slot)

最新推荐文章于 2022-07-29 19:00:00 发布

A cold winter

最新推荐文章于 2022-07-29 19:00:00 发布

阅读量118

点赞数

分类专栏： Vue.js基础文章标签： vue

本文链接：https://blog.csdn.net/qq_41611820/article/details/103029254

版权

Vue.js基础专栏收录该内容

20 篇文章 1 订阅

订阅专栏

<body>
		<div id="root">
			<child>
				<p>Dell</p>
			</child>
		</div>
		<script>
			Vue.component('child',{
				template:`<div>
				<slot>
				<p>default value</p>
				</slot>
				</div>`
			})
			var vm = new Vue({
				el:'#root'
			})
		</script>
	</body>

插槽可以有默认值，当子组件没有插入内容时，就使用默认值。
当需要使用多个插槽时，我们可以给插槽起名字，称为具名插槽。

<body>
		<div id="root">
			<child>
				<div class="header" slot="header">I am header</div>
				<div class="footer" slot="footer">I am footer</div>
			</child>
		</div>
		<script>
			Vue.component('child',{
				template:`<div>
				<slot name='header'>default value</slot>
				<div class='content'>content</div>
				<slot name='footer'></slot>
				</div>`
			})
			var vm = new Vue({
				el:'#root'
			})
		</script>
	</body>