Vue中的插槽slot使用

最新推荐文章于 2024-09-14 15:19:40 发布

原创最新推荐文章于 2024-09-14 15:19:40 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍Vue中的插槽(slot)机制，通过示例演示如何利用插槽提高组件复用性。展示了如何在一个通用子组件中使用slot预留位置，以便在不同场景下插入不同内容。

Vue中的插槽slot

1.首先在了解这个插槽这个概念之前，我想通过一个图片来更加形象说一下。
在这里插入图片描述
下面简单说一下这个图片，我们可以看到父组件中包含了各个大小相同的子组件，这些子组件中的布局上面的布局是一样的，唯一不相同的是下方不同的形状。
首先我们会想着先做好一个子组件，比如说是cpn1，这个组件做好后，我复制两份然后再修改他们不同的地方，这样作其实看来也是可以的，但是这样做导致了组件的复用性是特别差的.
然后我们用到slot插槽后，就可以这样来做：我可以单单创建一个子组件然后用slot标签给布局不同的部分提供空余地方，当我们想要用的时候只需要再父组件中加入我们想要添加的布局即可。下面我通过具体的代码进行演示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件之slot</title>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
	</head>
	<!-- 插槽中slot 是默认-->
	<body>
		<div id="app">
			<cpn><button type="button">按钮</button></cpn>
			<cpn><span>span</span></cpn>
			<cpn><i>i标签</i></cpn>
		</div>
	</body>
	<template id="cpn">
		<div>
			<h2>我是子组件</h2>
			<h1>{{anther}}</h1>
			<slot></slot>
		</div>

	</template>
	<script type="text/javascript">
		const app = new Vue({
			el: '#app',
			data: {
				message: 'hello'
			},
			components: {
				cpn: {
					template: '#cpn',
					data() {
						return {
							anther: '枫叶在飘呀'
						}
					}
				}
			}
		})
	</script>
</html>