Vue:插槽&作用域插槽

最新推荐文章于 2024-10-18 19:19:52 发布

KeithRong

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量116

点赞数

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

本文链接：https://blog.csdn.net/weixin_42103026/article/details/103651052

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 具名插槽

在子组件中使用 <slot>标签定义插槽，父组件可使用slot指令替换子组件中的插槽内容。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>插槽</title>
</head>
<body style="background-color: antiquewhite;">
<div id="app">
	<cpn>
		<span slot="center" style="color: red;">替换后的中间</span>
	</cpn>
</div>
</body>

<template id="cpn">
	<div>
		<p>我是子组件</p>
		<slot name="left"><span>左边</span></slot>
		<slot name="center"><span>中间</span></slot>
		<slot name="right"><span>右边</span></slot>
	</div>
</template>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
	el: '#app',
	components:{
		cpn:{
			template: '#cpn'
		}
	}
})
</script>
</html>

在这里插入图片描述

2. 作用域插槽

父组件需要使用子组件中的数据可使用作用域插槽

子组件的 <slot> 中定义一个 :data 属性（名称可自拟）
父组件中可用 v-slot:default=“slot” 取得子组件的属性，default为子组件插槽的名称，"slot"可自定义。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>作用域插槽</title>
</head>
<body style="background-color: antiquewhite;">
<div id="app">
	<cpn></cpn>
	<cpn>
		<template v-slot:default="slot">
			<span v-for="item in slot.data">{{item}} - </span>
		</template>
	</cpn>
</div>
</body>

<template id="cpn">
	<div>
		<slot :data="pLanguages">
			<ul>
				<li v-for="item in pLanguages">
					{{item}}
				</li>
			</ul>
		</slot>
	</div>
</template>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
	el: '#app',
	components:{
		cpn:{
			template: '#cpn',
			data(){
				return{
					pLanguages:['Javascript', 'Java', 'C#', 'Python', 'Go']
				}
			}
		}
	}
})
</script>
</html>