vue中slot插槽

最新推荐文章于 2022-10-10 14:34:00 发布

weixin_43939111

最新推荐文章于 2022-10-10 14:34:00 发布

阅读量967

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43939111/article/details/116234279

版权

vue 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

一、引用子组件标签中的内容会将子组件内对应的slot替换成添加的内容

<div id="app">
	下面是一个子组件
	<comp><button>点我</button><p>一个段落</p></comp>
</div>

<template>
	我是子组件
	<slot></slot>
	<!--slot标签会替换成button和p-->
</template>

二、子组件中slot还可以指定默认内容，当父组件没有在子组件标签中加内容时，子slot内容不会替换，如果父做了要求，子slot内容会全部被替换
①无替换

<div id="app">
	下面是一个子组件
	<comp></comp>
</div>

<template>
	我是子组件
	<slot><button>按钮</button><p>一个段落</p></slot>
	<!--slot会默认显示button和slot-->
</template>

②父控制替换

<div id="app">
	下面是一个子组件
	<comp><h1>标题</h1></comp>
</div>

<template>
	我是子组件
	<slot><button>按钮</button><p>一个段落</p></slot>
	<!--slot会显示h1-->
</template>

三、选择性替换slot

<div id="app">
	下面是一个子组件
	<comp><h1>标题</h1></comp>
</div>

<template>
	我是子组件
	<slot><button>按钮1</button><p>一个段落</p></slot>
	<slot><button>按钮2</button></slot>
	<slot><button>按钮3</button><span></span></slot>
	<!--三个slot会被替换显示<h1>标题</h1>，显示效果如下：-->
	<!--标题-->
	<!--标题-->
	<!--标题-->
</template>

如果想单独替换子组件的某个slot，比如我只想把中间的那个slot换成h1标题，这时，使用具名插槽（具有名字的插槽）：

<div id="app">
	下面是一个子组件
	<comp><h1 slot="center">标题</h1></comp>
</div>

<template>
	我是子组件
	<slot><button>按钮1</button><p>一个段落</p></slot>
	<slot name="center"><button>按钮2</button></slot>
	<slot><button>按钮3</button><span></span></slot>
	<!--三个slot会被替换显示<h1>标题</h1>，显示效果如下：-->
	<!--按钮1,一个段落-->
	<!--标题-->
	<!--按钮3-->
</template>

同理，如果slot没加name，会找到没有name的slot进行替换

遗留问题：根据官网，v2.6.x以后推荐v-slot而废除slot属性，我在html中引入v2.6.12的vue.js，发现slot依旧可以使用，v-slot却不好使，but，#是v-slot的简写（比如v-on你可以用@代替），我使用#可以，用v-slot却识别不出？？？难道在脚手架里才可以写"v-slot"这个属性吗？

<comp><template slot="abc">有效</template ></comp>
<comp><template #abc>有效</template ></comp>
<comp><template v-slot="abc">无效？？？</template ></comp>

四、插槽数据自定义显示
如果对插槽的数据展示不满意，即需要对插槽显示格式进行自定义修改，可以通过给插槽添加slot-scope（v-slot）属性获取插槽数据和绑定的数据来拼接成自己想要的格式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插槽</title>
	<script src="./vue.js"></script>
</head>
<body>
<div id="app">
	<tip></tip>
=============================================================
	<tip>
		<template slot-scope="aSlotData">
			<ul>
				<li>作家:{{aSlotData.aWriter.myName}}</li>
				<li>作品:{{aSlotData.aWriter.myWorks}}</li>
			</ul>
		</template>
	</tip>
</div>
<script>
  let app = new Vue({
    el:'#app',
	  components:{
		  tip:{
			  template: `<div>图书板块：
				 <slot :aWriter="obj">{{obj.myName}}</slot>
				</div>`,
			  data(){
			  	return {
			  		obj:{
						  myName:'刘慈欣',
						  myWorks:'《三体》'
					  }
				  }
			  }
		  }
	  }
  })
</script>

在这里插入图片描述
注意：使用slot-scope还是v-slot根据vue的版本来，很多帖子说新版本废弃了slot-scope改用v-slot，但我测试发现slot-scope和v-slot都可以起作用(我引入的v2.6.2版vue.js)，具体实现以项目为准

weixin_43939111

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中slot插槽

一、引用子组件标签中的内容会将子组件内对应的slot替换成添加的内容<div id="app"> 下面是一个子组件 <comp><button>点我</button><p>一个段落</p></comp></div><template> 我是子组件 <slot></slot> </templa
复制链接

扫一扫