插槽slot

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

组件插槽

1. 口诀:

2. 组件内用占位

3. 使用组件时夹着的地方, 传入标签替换slot

插槽默认内容

1. 如果外面不给传, 想给个默认显示内容
2. 夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用夹着的内容在原地显示

<slot>默认内容</slot>

组件进阶 - 具名插槽

1. 传入的标签可以分别派发给不同的slot位置
2. slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签(v-slot: 可以简化成#)

<div class="container" v-show="isShow">
    <slot name="one"></slot>
    <slot name="two"></slot>
</div>

<Pannel2>
    <template v-slot:one>
		<img src="../assets/mm.gif" alt="" />
    </template>
    <template v-slot:two>
		<span>我是文字哦</span>
    </template>
</Pannel2>


<Pannel2>
    <template #one>
		<div>
            <p>寒雨连江夜入吴,</p>
            <p>平明送客楚山孤。</p>
            <p>洛阳亲友如相问，</p>
            <p>一片冰心在玉壶。</p>
        </div>
    </template>
    <template #two>
		<img src="../assets/mm.gif" alt="" />
    </template>
</Pannel2>

作用域插槽

1. 组件内变量绑定在slot上, 然后使用组件v-slot=“变量” 变量上就会绑定slot身上属性和值（v-slot="变量"可以简化成:=‘变量’）

<template>
  <div>
    <p>这里是个Pannel3-子组件, 下面是插槽位置</p>
    <slot name="one" :row="slotDefault">{{ slotDefault.default1 }}</slot>
  </div>
</template>

<script>
export default {
  data(){
    return {
      slotDefault: {
        default1: "无名氏",
        default2: "孙红雷"
      }
    }
  }
}
</script>

<template>
  <div>
    <!-- 夹着位置不传, slot使用默认内容"无名氏" -->
    <Pannel3></Pannel3>
    <!-- 想要改变默认内容, 但是默认数据在子组件里, 想让插槽使用就使用插槽作用域 -->
    <!-- 
      口诀: 1.创建组件, 准备slot, 在slot上绑定属性和子组件值
      2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
      3. 自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置
     -->
    <Pannel3>
      <template v-slot:one="scope">
        {{ scope.row.default2 }}
      </template>
    </Pannel3>
  </div>
</template>

<script>
import Pannel3 from './Pannel3'
export default {
  components: {
    Pannel3
  }
}
</script>