Vue插槽

官网地址：https://cn.vuejs.org/v2/guide/components-slots.html

基本使用

创建一个带插槽的组件
SlotDemo.vue

<template>
  <div>
    <h2>我是SlotDemo组件</h2>
    <!-- 插槽 -->
    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
</style>

使用
Demo.vue

<template>
  <div>
    <slot-demo>
      <!-- 插槽内容 -->
      <el-button type="success">成功</el-button>
    </slot-demo>
  </div>
</template>

<script>
import SlotDemo from './SlotDemo.vue'

export default {
  components: {
    'slot-demo': SlotDemo
  }
}
</script>

<style lang="less" scoped>
</style>

运行效果

带默认内容的插槽

SlotDemo.vue

<template>
  <div>
    <h2>我是SlotDemo组件</h2>
    <slot>插槽默认内容</slot>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
</style>

Demo.vue

<template>
  <div>
    <slot-demo></slot-demo>

    <slot-demo>
      <el-button type="success">成功</el-button>
    </slot-demo>
  </div>
</template>

<script>
import SlotDemo from './SlotDemo.vue'

export default {
  components: {
    'slot-demo': SlotDemo
  }
}
</script>

<style lang="less" scoped>
</style>

运行效果

具名插槽

SlotDemo.vue

<template>
  <div>
    <h2>我是SlotDemo组件</h2>
    <!-- 一个不带 name 的 <slot> 出口会带有隐含的名字“default” -->
    <slot></slot>
    <slot name="left"></slot>
    <slot name="center"></slot>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
</style>

Demo.vue

<template>
  <div>
    <slot-demo>
      <template v-slot:default>
        <el-button type="info">default</el-button>
      </template>
      <template v-slot:left>
        <el-button type="primary">left</el-button>
      </template>
      <template v-slot:center>
        <el-button type="success">center</el-button>
      </template>
      <template v-slot:right>
        <el-button type="warning">right</el-button>
      </template>
    </slot-demo>

	<!-- 缩写 # -->
    <slot-demo>
      <template #default>
        <el-button type="info">default</el-button>
      </template>
      <template #left>
        <el-button type="primary">left</el-button>
      </template>
      <template #center>
        <el-button type="success">center</el-button>
      </template>
      <template #right>
        <el-button type="warning">right</el-button>
      </template>
    </slot-demo>
  </div>
</template>

<script>
import SlotDemo from './SlotDemo.vue'

export default {
  components: {
    'slot-demo': SlotDemo
  }
}
</script>

<style lang="less" scoped>
</style>

运行效果

编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

作用域插槽

SlotDemo.vue

<template>
  <div>
    <h2>我是SlotDemo组件</h2>
    <slot :user="user">{{user.name}}</slot>
    <br />
    <slot name="center" :user="user">{{user.name}}</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'tom',
        age: 24
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>

Demo.vue

<template>
  <div>
    <!-- 作用域插槽 -->
    <slot-demo>
      <template #default="slotProps">{{ slotProps.user.age}}</template>
    </slot-demo>

    <!-- 独占默认插槽的缩写语法 -->
    <!-- 不能这么写 <slot-demo #="slotProps">{{ slotProps.user.age}}</slot-demo> -->
    <slot-demo #default="slotProps">{{ slotProps.user.age}}</slot-demo>
    <slot-demo v-slot="slotProps">{{ slotProps.user.age}}</slot-demo>

    <!-- 注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确： -->
    <!-- 只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法 -->
    <slot-demo>
      <template #default="slotProps">{{ slotProps.user.age}}</template>
      <template #center="slotProps">{{ slotProps.user.age}}</template>
    </slot-demo>
  </div>
</template>

<script>
import SlotDemo from './SlotDemo.vue'

export default {
  components: {
    'slot-demo': SlotDemo
  }
}
</script>

<style lang="less" scoped>
</style>

运行效果