4-6 在Vue中使用插槽

最新推荐文章于 2024-06-21 09:55:16 发布

上晴下雪

最新推荐文章于 2024-06-21 09:55:16 发布

阅读量111

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xueerkeji/article/details/106294864

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

推荐：插槽

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4-6 在Vue中使用插槽</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

	<div id="app">
		<chlid>
			<div slot="header"><h1>this is header</h1></div>
			<div slot="footer">this is footer</div>
		</chlid>
	</div>
	<script type="text/javascript">
		//slot 用来替换父组节DOM
		//具名插槽
		//定义一个子组件
		Vue.component('chlid',{
			template:	`<div>
							<slot name="header"><h1>这是一个默认值</h1></slot>
							<p>内容1</p>
							<slot name="footer"><h1>这是一个默认值</h1></slot>
						</div>`
		})
		var app = new Vue({
			el:'#app',

		})
	</script>
</body>
</html>

不推荐：不使用插槽

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4-6 在Vue中使用插槽</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

	<div id="app">
		<chlid footer="<h3>这是不使用插槽的方法</h3>">
			<div slot="header"><h1>this is header</h1></div>
			
		</chlid>
	</div>
	<script type="text/javascript">
		//v-html 替代 
		
		Vue.component('chlid',{
			props:['footer'],
			template:	`<div>
							<slot name="header"><h1>这是一个默认值</h1></slot>
							<p>内容1</p>
							<div v-html="this.footer"></div>
						</div>`
		})
		var app = new Vue({
			el:'#app',

		})
	</script>
</body>
</html>