手牵手学习vue之详解slot插槽

• 什么是插槽

插槽就是在子组件中给父组件提供的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

• 匿名插槽

//父组件

<template>
  <div>
    <slotButton>插槽按钮</slotButton>
  </div>
</template>

<script>
import slotButton from "./slot-button";
export default {
  name: "slot",
  components: {
    slotButton
  }
};
</script>

// 子组件

<template>
  <div>
    <button>
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  name: "slot",
  data() {
    return {};
  }
};
</script>

• 具名插槽

有时我们需要多个插槽，给插槽命名方便定位。

// 父组件

<template>
  <div>
    <slotName>
      <div slot="header">header区域</div>
      <div>main内容区域</div>
      <div slot="footer">footer区域</div>
    </slotName>
  </div>
</template>

<script>
import slotName from "./slot-name";
export default {
  name: "slot",
  components: {
    slotName
  },
  data() {
    return {};
  }
};
</script>

// 子组件

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

• 作用域插槽  |  带数据插槽

官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。什么意思呢，就是前面两种，都是在组件的template里面写。

// 父组件

<template>
  <div>
    <slotScope>
      <template v-slot:default="userInfo"> 用户姓名： {{ userInfo }} </template>
    </slotScope>
  </div>
</template>

<script>
import slotScope from "./slot-scope";
export default {
  components: {
    slotScope
  }
};
</script>

// 子组件

<template>
  <div>
    <slot :userInfo="userInfo"></slot>
  </div>
</template>

<script>
export default {
  name: "slotScope",
  data() {
    return {
      userInfo: { name: "宫鑫" }
    };
  }
};
</script>

说明：slot理解的并没有很深，只是会用的程度，大多数情况，这些事够用的。