代码结构

 <vue 组件 4、插槽的使用>

 

 

一、     01-slot-插槽的基本使用

1、 效果  

同样的一个插槽,父组件调用的时候不同展现的内容就不同

 <vue 组件 4、插槽的使用>

 

 

2、代码

01-slot-插槽的基本使用.html

 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<!--
			1.插槽的默认值 <slot>button</slot>
			2.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素
		-->

		<div id="app">
			<cpn></cpn>

			<cpn><span>哈哈哈</span></cpn>
			
			<cpn><i>呵呵呵</i></cpn>
			
			
			<cpn>
				<div>我是div元素</div>
				<p>我是p元素</p>
			</cpn>

			 
		</div>


		<template id="cpn">
			<div>
				<h2>我是组件</h2>
				<slot><button>按钮</button></slot>
			</div>
		</template>

		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					message: '你好'
				},
				components: {
					cpn: {
						template: '#cpn'
					}
				}
			})
		</script>

	</body>
</html>

 

 

二、     02-slot-具名插槽的使用

1、 效果

给插槽起名字,父组件调用的时候指定替换哪个插槽的内容

 <vue 组件 4、插槽的使用>

 

 

2、代码

02-slot-具名插槽的使用.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<cpn></cpn>
			------------------------
			<cpn><span slot="center">标题</span></cpn>
			----------------------------
			<cpn><button slot="left">返回</button></cpn>
		</div>


		<template id="cpn">
			<div>
				<slot name="left"><span>左边</span></slot>
				<slot name="center"><span>中间</span></slot>
				<slot name="right"><span>右边</span></slot>
			</div>
		</template>

		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					message: '你好啊'
				},
				components: {
					cpn: {
						template: '#cpn'
					}
				}
			})
		</script>

	</body>
</html>

 

三、     03-slot-绑定数据及展现方式

1、效果

给插槽绑定数据,调用的时候还可以指定数据的不同展现形式

 <vue 组件 4、插槽的使用>

 

 

2、代码

03-slot-绑定数据及展现方式.html

 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<cpn></cpn>
             -------------------------------------
			<cpn>
				<!--目的是获取子组件中的pLanguages-->
				<template slot-scope="slot">
					<span>{{slot.data.join(' - ')}}</span>
				</template>
			</cpn>
              -------------------------------------
			<cpn>
				<!--目的是获取子组件中的pLanguages-->
				<template slot-scope="slot">
					<span>{{slot.data.join(' * ')}}</span>
				</template>
			</cpn>
		</div>

		<template id="cpn">
			<div>
				<slot :data="pLanguages">
					<ul>
						<li v-for="item in pLanguages">{{item}}</li>
					</ul>
				</slot>
			</div>
		</template>
		<script src="vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					message: '你好啊'
				},
				components: {
					cpn: {
						template: '#cpn',
						data() {
							return {
								pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
							}
						}
					}
				}
			})
		</script>


	</body>
</html>

 

上一篇:Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、父组件访问子组件存储在data中的数据)


下一篇:从零开始学VUE之组件化开发(父子组件的访问方式)