vue.js：作用域插槽的使用案例

news2024/11/21 1:41:39

作用域插槽的使用理解
父组件替换插槽的标签，但是内容是由子组件提供的。

案例需求

子组件中包含一组数据，比如：pLanguages：[‘Java’,‘c++’,‘JavaScript’,‘python’,‘C语言’,‘Go’,‘C#’]
现需要在多个页面进行操作：
- 某些界面是以水平方向展示的
- 某些界面是以列表形式展示的
- 某些界面是以一个数组的形式展示
利用slot作用域插槽就可以实现

在父组件使用子组件时，从子组件中拿到数据：

通过获取到slot属性
再通过slot.data就可以获取到我们传入的数据

在这里插入图片描述

笔记完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>作用域插槽的案例</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn>
				<!-- 目的：获取子组件中的数据pLanguages -->
				<template slot-scope = "slot">
					<!-- 该方法实现后输出最后一个元素的时候会多一个杠或者星号 -->
					<!-- 可以利用join函数来控制 -->
					<!-- <span v-for = "item in slot.data">{{item}}-</span> -->
					<span>{{slot.data.join('-')}}</span>
				</template>
			</cpn>
			<cpn>
				<!-- 目的：获取子组件中的数据pLanguages -->
				<template slot-scope = "slot">
					<!-- <span v-for = "item in slot.data">{{item}}*</span> -->
					<span>{{slot.data.join('*')}}</span>
				</template>
			</cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<slot :data = "pLanguages">
					<ul>
						<li v-for = "item in pLanguages">{{item}}</li>
					</ul>
				</slot>	
			</div>
		</template>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue"
				},
				components: {
					cpn: {
						template:'#cpn',
						data() {
							return {
								pLanguages:['Java','c++','JavaScript','python','C语言','Go','C#']
							}
						}
					}
				}
			});
		</script>
	</body>
</html>