Vue中的插槽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>

运行效果：

通过代码和效果演示，我只做了一个子组件然后在子组件中写入一个slot插槽，
然后在父组件中，我分别写入不同的内容添加到子组件中slot就会默认将你添加进来的标签放入自己的囊中。
显而易见，这样实现组件的复用性效果是非常好的。