[JavaScript知识库]vue学习-12-作用域插槽

作用域插槽

数据在要使用的子组件中，而展示交给父组件来指定

这里数据在cpn子组件中，但是我们想在负组件中指定数据展示方式

	<template id="cpn">
		<div>
			<!-- 在slot中自定义属性data -->
			<slot name="hobby"  :data="hobbies">
				<!-- //默认展示效果 -->
				<ul>
					<li v-for="hobby in hobbies">{{hobby}}</li>
				</ul>
			</slot>
			<h3>-----------------</h3>
			<slot name="movie" :pp="movies">
				<ul>
					<li v-for="movie in movies">{{movie}}</li>
				</ul>
			</slot>
		</div>
	</template>

	<div id="app">
			<cpn1>
				<template  v-slot:hobby="slotProps">
				<!-- 具名插槽指定name="hobby"的slot,使用"slotProps"来接收:data="hobbies" -->
					<h4 v-for="item in slotProps.data">{{item}}</h4>
				</template>
				 <!-- v-slot:xx可以缩写为:#xx -->
				<template #movie="slotData">
					<h4 v-for="item in slotData.pp">{{item}}</h4>
				</template>
			</cpn1>
		</div>

	const cpn1 = Vue.extend({
			template: '#cpn',
			data() {
				return {
					hobbies: ['篮球','音乐','游戏'],
					movies: ['速度与激情','蜘蛛侠','钢铁侠','美国队长']
				}
			}
		})
		var app = new Vue({
			el: '#app',
			data: {
				result: ''
			},
			components: {
				'cpn1': cpn1
			}
		});

在子组件中的template 中的slot中通过设置属性，值为数据。如：

<template id="cpn">
		<div>
			<!-- 在slot中自定义属性data -->
			<slot name="hobby"  :data="hobbies">
				<!-- //默认展示效果 -->
				<ul>
					<li v-for="hobby in hobbies">{{hobby}}</li>
				</ul>
			</slot>
			<h3>-----------------</h3>
			<slot name="movie" :pp="movies">
				<ul>
					<li v-for="movie in movies">{{movie}}</li>
				</ul>
			</slot>
		</div>
	</template>

在父组件中使用v-slot:xx="xx"获取数据

			<cpn1>
				<template  v-slot:hobby="slotProps">
				<!-- 具名插槽指定name="hobby"的slot,使用"slotProps"
				来接收:data="hobbies" -->
					<h4 v-for="item in slotProps.data">{{item}}</h4>
				</template>
				 <!-- v-slot:xx可以缩写为:#xx -->
				<template #movie="slotData">
					<h4 v-for="item in slotData.pp">{{item}}</h4>
				</template>
			</cpn1>

slotProps是一个对象其中就是在子组件的slot中:data=“hobbies”。

{
data: [‘篮球’,‘音乐’,‘游戏’]
}
使用slotProps.data来获取数据

这里的data就是slot中的:data="hobbies"