Vue中的插槽slot使用

最新推荐文章于 2022-07-14 19:00:43 发布

枫叶在飘呀

最新推荐文章于 2022-07-14 19:00:43 发布

阅读量142

点赞数 2

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

本文链接：https://blog.csdn.net/ld16631069828/article/details/116987911

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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就会默认将你添加进来的标签放入自己的囊中。
显而易见，这样实现组件的复用性效果是非常好的。

枫叶在飘呀

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue中的插槽slot使用

Vue中的插槽slot1.首先在了解这个插槽这个概念之前，我想通过一个图片来更加形象说一下。下面简单说一下这个图片，我们可以看到父组件中包含了各个大小相同的子组件，这些子组件中的布局上面的布局是一样的，唯一不相同的是，不同的形状。首先我们会想着先做好一个子组件，比如说是cpn1，这个组件做好后，我复制两份然后再修改他们不同的地方，这样作其实看来也是可以的，但是这样做导致了组件的复用性是特别差的.然后我们用到slot插槽后，就可以这样来做：我可以单单创建一个子组件然后用slot标签给布局不同的部分提
复制链接

扫一扫