Vue：插槽 slot

最新推荐文章于 2024-07-07 03:45:49 发布

Darryl、

最新推荐文章于 2024-07-07 03:45:49 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/weixin_43805971/article/details/107555137

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为保持组件化开发能满足一个组件布局的多种类展示，使用slot插槽即可解决。方法如下：

<!-- 
	需求：
	组件标题都是案例一，后面跟的标签需要不同。
	第一个是按钮
	第二是个h标签
	第三个是p标签
	基本使用
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<cpn></cpn>
		<!-- 基本使用 -->
		<!-- <cpn>
			<button >返回按钮</button>
		</cpn>
		<cpn>
			<h1>我是H1标签</h1>
		</cpn>
		<cpn>
			<p>我是P标签</p>
		</cpn> -->
		<!-- 对应使用 -->
		<cpn>
			<button slot="left">返回按钮</button>
		</cpn>
		<cpn>
			<button slot="left">返回按钮</button>
			<span slot="center">标题</span>
		</cpn>
		<cpn>
			<button slot="left">返回按钮</button>
			<span slot="center">标题</span>
			<button slot="right">更多</button>
		</cpn>
	</div>
	<!-- 基本使用 -->
	<!-- <template id="cpn">
		<div>
			<h1>案例1</h1>
			<slot>我是slot的默认值</slot>
			<p>------------------</p>
		</div>
	</template> -->

	<!-- 具名使用(一一对应) -->
	<template id="cpn">
		<div>
			<slot name="left">默认：left</slot>
			<slot name="center">默认：center</slot>
			<slot name="right">默认：right</slot>
			<p>------------------</p>
		</div>
	</template>
</body>
<script>
	var app = new Vue({
		el:'#app',
		components:{
			cpn:{
				template:"#cpn",
			}
			
		}
	})	
</script>
</html>

插槽的作用域的使用

使用环境：大部分是用于父组件想改变插槽中默认数据的展示方式，但由于数据来自于子组件展示，所以在父组件展示时无法获取子组件的数据，这时需用一下方法，具体步骤代码注释都有。

<!-- 
	作用域插槽：
	父组件想替换插槽里面的标签，但是数据是子组件提供的时候，需要
	使用到作用域插槽
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h1>我是父组件</h1>

		<cpn>
			<!-- 父组件想修改子组件值的展示方式 -->
			<!-- 
				父组件需要添加slot-scope属性，绑定slot插槽，
				然后渲染slot.自定义属性即可拿到，
				子组件插槽中传来的值
			 -->
			<template slot-scope='slot'>
				<span>{{slot.list}}</span>
			</template>
		</cpn>

		<cpn>
			<!-- 父组件想修改子组件值的展示方式 -->
			<template slot-scope='slot'>
				<span>{{slot.list.join(" * ")}}</span>
			</template>
		</cpn>

	</div>
	<!-- 具名使用(一一对应) -->
	<template id="cpn">
		<div>
			<h1>我是子组件</h1>
			<!-- 需要给slot定义并绑定一个属性，将想要传递的值写上 -->
			<slot :list='List'>
				<ul>
					<li v-for="item in List">{{item}}</li>
				</ul>
			</slot>
		</div>
	</template>
</body>
<script>
	var app = new Vue({
		el:'#app',
		data:{

		},
		methods:{
		},
		components:{
			cpn:{
				template:"#cpn",
				data(){
					return{
						List:['Javascript','C','C++','swift']
					}
				},
			}	
		}
	})
</script>

</html>

Darryl、

关注

0
点赞
踩
0

收藏

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

为保持组件化开发能满足一个组件布局的多种类展示，使用slot插槽即可解决。方法如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script
复制链接

扫一扫