具名插槽

Posted 2020-11-23 xuwupiaomiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了具名插槽相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于具名插槽的主要内容，如果未能解决你的问题，请参考以下文章

具名插槽作用域插槽的新写法

Vue—解构插槽 Prop以及具名插槽的缩写

Vue2.0—默认插槽具名插槽作用域插槽（二十四）

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化