Vue 插槽

插槽语法是Vue 实现的内容分发 API，用于复合组件开发。该技术在通用组件库开发中有大量应用。

1. 匿名插槽

// child
<div>
    <slot>slot>
div>

// parent
<child> Hello World child>

2. 具名插槽

// 1. 第一种情况
// child
<template>
  <div class="child">
    <slot>slot>
    <slot name="content">slot>
  div>
template>

// parent
<template>
  <div class="home">
    <World msg="World">
      <div class="default">default msgdiv>
      <div slot="content">default contentdiv>
    World>
  div>
template>

2. 第二种情况
// child
<template>
  <div class="child">
    <slot>slot>
    <slot name="content">slot>
  div>
template>

// parent
<template>
  <div class="home">
    <World msg="World">
      <template>
        <div class="default">default msgdiv>
      template>
      <template v-slot:content>
        <div>content msgdiv>
      template>
    World>
  div>
template>

3. 作用域插槽

// child
<template>
  <div class="child">
    <slot :foo="foo">slot>
    <slot name="content">slot>
  div>
template>
<script>
export default {
  data () {
    return {
      foo: "john"
    }
  },
  mounted () {
  }
}
script>
<style scoped lang="less">style>


// parent
// 第一种 slot-scope 属性
<template>
  <div class="home">
    <World msg="World">
      <template slot-scope="slotProps">
        来自子组件数据：{{slotProps.foo}}
      template>
    World>
  div>
template>
<script>
import World from '@/components/World'
export default {
  components: {
    World
  }
}
script>



// 第二种 v-slot:default="slotProps"
<template>
  <div class="home">
    <World msg="World">
      <template v-slot:default="slotProps">
        来自子组件数据：{{slotProps.foo}}
      template>
    World>
  div>
template>
<script>
import World from '@/components/World'
export default {
  components: {
    World
  }
}
script>



// 第三种
<template>
  <div class="home">
    <World msg="World">
      <div slot="default" slot-scope="slotProps">
        来自子组件数据：{{slotProps.foo}}
      div>
    World>
  div>
template>
<script>
import World from '@/components/World'
export default {
  components: {
    World
  }
}
script>