vue学习-12-作用域插槽

作用域插槽

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

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

	<template id="cpn">
		<div>
			
			<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">
				
					<h4 v-for="item in slotProps.data">{{item}}h4>
				template>
				 
				<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 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">
				
					<h4 v-for="item in slotProps.data">{{item}}h4>
				template>
				 
				<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"