vue中插槽的几种写法

什么是插槽

 插槽顾名思义就是一个占位符的意思，可以进行传参，可以设置其它的元素布局,我就简单说下插槽的几种写法

vue中有三种插槽

• 默认插槽
• 具名插槽
• 作用域插槽

插槽在vue中的具体应用

• slotA.vue

<template>
  <div class="demo1">
    <slot>默认插槽</slot>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
    <slot name="params" :names="names"></slot>
    <slot name="gender" :gender="gender"></slot>
    <slot name="age" :age="age"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: "张三",
      gender: '男',
      age: 18
    }
  }
}
</script>

• App.vue

<template>
  <div id="app">
    <slotA>
      <!-- 具名插槽，顾名思义就是有名字的插槽 -->
      <!-- vue2.6.0以下版本的书写方式  -->
      <div slot="header">
        <div>
          header头部
        </div>
      </div>
      <!-- vue2.6.0以上版本书写方式 -->
      <template v-slot:content>
        <div>
          content内容区位
        </div>
      </template>
      <!-- vue2.6.0以上版本的书写语法糖 -->
      <template #footer>
        <div>
          footer尾部
        </div>
      </template>

      <!-- 作用域插槽 -->
      <!-- vue2.6.0以下版本的书写方式  -->
      <template slot="params" slot-scope="{names}">
         姓名 {{names}}
      </template>
       <!-- vue2.6.0以上版本书写方式 -->
      <template v-slot:gender="{gender}">
          性别 {{gender}}
      </template>
       <!-- vue2.6.0以上版本的书写语法糖-->
      <template #age="{age}">
          年龄 {{age}}
      </template>

    </slotA>
  </div>
</template>

<script>
import slotA from './components/slot/slotA.vue'
export default {
  components: { slotA }
}
</script>

效果展示