初识 Vue（19）---（Vue 中使用插槽(slot)）

最新推荐文章于 2024-07-26 13:02:41 发布

姜皓

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量935

点赞数 1

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/81263278

版权

本文介绍了在 Vue 中如何使用插槽解决子组件内容由父组件传递的问题，包括无名插槽和具名插槽的使用，以及插槽设置默认样式的方法。通过插槽，可以提高代码的可读性和组件的复用性。

摘要由CSDN通过智能技术生成

Vue 中使用插槽(slot)

案例：子组件中的一部分内容是根据父组件传递来的 DOM 来进行显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child content='<p>Dell</p>'></child>
	</div>	
	<script>
	Vue.component('child',{
		props:['content'],
		template:'<div><p>hello</p><div v-html="this.content"></div></div>'
		
	})

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

输出：