vue具名插槽的使用

vue的匿名插槽（默认插槽）

父组件

<div>
	<myslot>我是刚刚myslot>
div>

子组件

<div>
	<slot><slot>
div>

vue的具名插槽

父组件

<div>
	<myslot>
		<template #one>猪猪是一只大肥猫template>
		<template #two>通通是一个大屁眼子template>
		<template #three>咪咪是没心没肺的小混蛋template>
		我是刚刚
	myslot>
div>

子组件

<div>
	<slot name="one">slot>
	<slot><slot>
	<slot name="two">slot>
	<slot name="three">slot>
div>

渲染出来（大致顺序）即为

vue的作用域插槽

大白话解释作用域插槽：父组件可以通过插槽读到子组件对应插槽所带的数据
父组件

<div>
	<myslot>
		<template #oneData="oneData">
			<div>{
    {oneData.one.message}}div>
		template>
		<template #two>通通是一个大屁眼子template>
		<template #three>咪咪是没心没肺的小混蛋template>
		我是刚刚
	myslot>
div>

子组件

<div>
	<slot name="one" :data='one'>slot>
	<slot><slot>
	<slot name="two">slot>
	<slot name="three">slot>
div>

<script>
	export default {
      
		data() {
      
			return {
      
				one: {
      
					message: '这是子组件所带的数据message',
			    },
			};
		},
	}
script>

代码优化

<div>
	<myslot>
		<template #oneData="{oneData}">
			<div>{
    {oneData.message}}div>
		template>
		<template #two>通通是一个大屁眼子template>
		<template #three>咪咪是没心没肺的小混蛋template>
		我是刚刚
	myslot>
div>

子组件

<div>
	<slot name="one" :oneData='one'>slot>
	<slot><slot>
	<slot name="two">slot>
	<slot name="three">slot>
div>

<script>
	export default {
      
		data() {
      
			return {
      
				one: {
      
					message: '这是子组件所带的数据message',
			    },
			};
		},
	}
script>