vue插槽

匿名插槽：当组件内一幅幅标签不确定时，在组件内使用<slot><slot/>占位,当使用组件在标签内放入什么内容，在组件内就会替换掉slot标签并显示，在slot标签内放置内容，就会作为默认显示内容显示

子组件：

<template>
  <div>
    性别：<slot></slot>
  </div>
</template>

父组件：

    <h3>匿名插槽</h3>
    <childTemp>
      女
    </childTemp>

具名插槽：

•  组件内有多处不确定标签时使用，slot占位，给slot加上name属性区分。
•  父组件内使用时用template标签带上v-slot:name传递内容，可简写成#name。
•   v-slot:name="自定义变量名"和作用域插槽一起用。

子组件：

<template>
  <div>
    <slot name="up">苹果</slot>
    <slot name="down">apple</slot>
  </div>
</template>

父组件：

    <h3>具名插槽</h3>
    <!-- <h4>旧版本</h4>     -->
    <temp2>
      <template slot="up">
        香蕉
      </template>
      <template slot="down">
        banana
      </template>
      <br>
    </temp2>

    <!-- <h4>新版本</h4> -->
    <temp2>
      <template v-slot:up>
        梨子
      </template>
      <template #down>
       pear
      </template>
    </temp2>

作用域插槽：

• 在父组件内需要使用子组件的数据时
• 在子组件的slot标签上绑定属性和子组件内的值，:data=data
• 父组件中使用template和v-slot="自定义变量名"，父组件通过这个自定义变量获取子组件的数据
• 自定义变量名自动绑定slot标签上所有属性和值

子组件：

<template>
  <div>
    <!-- 旧 -->
    <slot :data=data></slot>
    <!-- 新 -->
    <slot name="song" :data=data></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ['海棠酒满', '倾尽天下', '千秋莫负']
    }
  }
}
</script>

父组件：

    <h3>作用域插槽</h3>
    <!-- 旧写法 -->
    <temp3>
      <template slot-scope="user">
        <div v-for="(value,index) in user.data" :key="index">{{value}}</div>
      </template>
    </temp3>
    <!-- 新 -->
    <temp3>
      <!-- 可简写成#song="data" ，这里使用了具名插槽 -->
      <template v-slot:song="data">
        {{ data }}
      </template>
    </temp3>