021_Vue插槽

最新推荐文章于 2025-04-11 16:31:49 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-04-11 16:31:49 发布

阅读量265

点赞数

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

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122899482

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 插槽

1.1. 父组件向子组件传递内容

1.2. 插槽位置

Vue.component('alert-box', {
	template: `
		<div>
			<strong>ERROR:</strong>
			<slot>默认内容</slot>
		</div>
	`
});

1.3. 插槽内容

<div id="app">
	<alert-box>有bug发生</alert-box>
	<alert-box>有一个警告</alert-box>
	<alert-box></alert-box>
</div>

1.4. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插槽</title>
	</head>
	<body>
		<div id="app">
			<alert-box>有bug发生</alert-box>
    		<alert-box>有一个警告</alert-box>
    		<alert-box></alert-box>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
	      	// 组件插槽: 父组件向子组件传递内容
	    	Vue.component('alert-box', {
	      		template: `
	        		<div>
	          			<strong>ERROR:</strong>
	          			<slot>默认内容</slot>
	        		</div>
	      		`
	    	});

			var vm = new Vue({
				el: "#app"
			});
		</script>
	</body>
</html>

1.5. 效果图

2. 具名插槽

2.1. 具名插槽用法

2.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>具名插槽</title>
	</head>
	<body>
		<div id="app">
			<base-layout>
      			<p slot='header'>标题信息</p>
      			<p>主要内容1</p>
      			<p>主要内容2</p>
      			<p slot='footer'>底部信息信息</p>
    		</base-layout>

    		<hr />

    		<base-layout>
    			<!-- slot='header'使用在<template>标签中, 就可以包括多个内容 -->
      			<template slot='header'>
        			<p>标题信息1</p>
        			<p>标题信息2</p>
      			</template>
		      	<p>主要内容1</p>
		      	<p>主要内容2</p>
      			<template slot='footer'>
        			<p>底部信息信息1</p>
        			<p>底部信息信息2</p>
      			</template>
    		</base-layout>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('base-layout', {
	      		template: `
	        		<div>
	          			<header><slot name='header'></slot></header>
	          			<main><slot></slot></main>
	          			<footer><slot name='footer'></slot></footer>
	        		</div>
	      		`
	    	});

			var vm = new Vue({
				el: "#app"
			});
		</script>
	</body>
</html>

2.3. 效果图

3. 作用域插槽

3.1. 作用域插槽应用场景: 父组件对子组件的内容进行加工。

3.2. 作用域插槽用法

3.3. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>作用域插槽</title>

		<style type="text/css">
			.current {
				font-weight: bold;
				color: green;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<book-list :list='books'>
      			<template slot-scope='slotProps'>
        			<span v-if='slotProps.index==3' class="current">{{slotProps.item}}</span>
        			<span v-else>{{slotProps.item}}</span>
      			</template>
    		</book-list>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('book-list', {
				props: ['list'],
	      		template: `
	        		<div>
	          			<li :key='index' v-for='(item, index) in list'>
	          				<slot :index='index' :item='item'></slot>
	          			</li>
	        		</div>
	      		`
	    	});

			var vm = new Vue({
				el: "#app",
				data: {
					books: ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计", "JavaScript权威指南"]
				}
			});
		</script>
	</body>
</html>

3.4. 效果图