通过实例代码分析VUE中slot的用法

概念

• 个人理解:父组件调用子组件时,子组件有一段内容不知道怎么显示,由父组件来定义此段内容.俗名插槽

slot的三种使用方式

• 匿名slot
• 具名slot
• 作用域slot

代码直接呈现

子组件定义

<template>
    <div>
      <p style="color: red;">子组件内容打印</p>
      <!--插入匿名的slot插槽,提前不知道应该写什么内容-->
        <slot></slot>
      <!--具名的slot-->
      <slot name="myslot">
      </slot>
      <!--作用域插槽-->
      <slot name="dataslot" :dataZi="user" ></slot>
    </div>
</template>

<script>
export default {
  name: 'SlotZi',
  data() {
    return {
      user: [
        { name: 'Jack', sex: 'boy' },
        { name: 'Jone', sex: 'girl' },
        { name: 'Tom', sex: 'boy' }
      ]
    }
  }
}
</script>

父组件调用子组件

<template>
  <div>
    <!--调用子组件,会将子组件底下的内容插入到子组件插槽slot的位置-->
    <slotzi>
      <p>父组件传递子组件1</p>
      <p>父组件传递子组件2</p>
    </slotzi>
    <!--具名的slot-->
    <slotzi>
      <template slot="myslot">
        <p>具名的子组件内容</p>
      </template>
    </slotzi>
    <!--作用域插槽-->
    <slotzi>
      <template slot="dataslot" slot-scope="user" >
        {{user}}
          <div v-for="item in user.dataZi" >
            {{item}}
          </div>
      </template>
    </slotzi>

  </div>
</template>

<script>
import SlotZi from './slotZi'
export default {
  name: 'SlotFu',
  components: {
    slotzi: SlotZi
  }
}
</script>