slot：插槽

最新推荐文章于 2024-12-08 23:48:32 发布

原创最新推荐文章于 2024-12-08 23:48:32 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

19 篇文章

订阅专栏

在我们使用组件之后，当组件定义完毕后，我们可以通过标签的方式去使用这个组件，类似于传统的HTML标签的使用，可以使用单标签，也可以使用双标签的方式；在传统的HTML双标签里面，我们可以在标签的内部写一个内容，那么如果是在我们自己开发的组件里面也书写内容，那么会出现什么样的结果？

<div id="box">
			<h1>{{ title }}</h1>
			<component1>
				你好
			</component1>
		</div>
		<script>
			var component1 = {
				data: function(){
					return {
						name: 'lili'
					}
				},
				template: `
						<div>
							<h2>我是局部组件</h2>
						</div>
				`
			}
			var vm = new Vue({
				el: '#box',
				data: {
					title: '我是主组件'
				},
				components: {
					component1
				}
			})
		</script>

我们发现，在我们自己开发的组件里写的内容是不会显示出来的，因为默认情况下，如果用户在组件的内容书写了内容，则vuejs默认的行为是使用组件的template里面的内容替换组件的调用处，标签内部的内容则会被覆盖
但有的时候我们会出现这样的情况，组件内部的一些东西，可以是希望用户自己进行定制化，不要写死了，是可以让用户自己来定制要显示的内容
在vuejs里面，作者设计了一种方式，可以在组件的内部（template），使用一定的方式来表示用户在组件调用处内部输入的内容，则这个方式就是要学习的 slot（插槽，也可以成为插座（容器），对应的插头(内容)）

我们将上面代码的局部组件的 template 部分加上 <slot></slot>标签

template: `
		<div>
			<h2>我是局部组件</h2>
			//标签内部的内容会替换<slot></slot>，并在这个标签的位置上显示
				<slot></slot>
			</div>
				`

注意：在使用这些组件的时候，对于组件内部的内容，如果要显示出来，我们可以在template里面使用 slot 进行显示，发现了一个小问题，用户在组件里面写的内容，没有严格的顺序概念，导致显示的时候是按照用户在组件内部写的顺序进行显示，但是我们自己开发的组件，有的时候是由严格的顺序关系。 1. 强制用户必须按照开发组件的人写的文档调用（强制规范） 2. 可以让组件对调用者是透明的，但是自己在开发组件，内部去维护（不用太强制）

第一种方法明显用户体验不好，所以我们可以使用第二种方法
使用 slot 的时候，我们可以给slot指定规格，使用的 name 属性，默认值 default，如果用户在组件的调用处，没有给插头里面填写内容，则我们可以在 slot 里面定义好默认显示的内容，我们用代码来解释一下就会很清楚了

<div id="box">
			<h1>{{ title }}</h1>
			<component1>
				 <!--slot 设置内容显示在哪个插槽里面-->
        		<!--现在组件内容显示顺序不是依赖用户定义的数据顺序，而是组件的开发者在template里面使用slot定义的顺序-->
        		<p slot="content">面板的内容：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam commodi cum deleniti deserunt dignissimos doloribus eos, error exercitationem facilis, in iste itaque nesciunt odit perferendis possimus quos tempore voluptates.</p>
        		<h2 slot="footer">面板的底部：Lorem ipsum dolor sit amet, consectetur.</h2>

        		<!--调用处如果没有使用 slot 则可以在 组件的template的 slot插槽里面定义好默认显示的内容-->
       		 <!--<h1 slot="header">内容</h1>-->

       		 <p>其他内容，没有指定在哪个插槽显示，则这个内容，在默认的slot里面显示</p>
		</component1>
			
		</div>
		<script>
			var component1 = {
				data: function(){
					return {
						name: 'lili'
					}
				},
				template: `
						<div>
							<slot></slot>
							<h2>我是局部组件</h2>
							<slot name="header">【我是默认的头部信息】</slot>
            				<slot name="content"></slot>
            				<slot name="footer"></slot>
            				<slot name="default"></slot>							
						</div>
				`
			}
			var vm = new Vue({
				el: '#box',
				data: {
					title: '我是主组件'
				},
				components: {
					component1
				}
			})
		</script>