关于前端:Vue-slot的用法

插槽根本应用

父组件

index.vue

<son1>
  <template>
    I'm content
  </template>
</son1>

components: {son1: () => import('./son1.vue'),
}

子组件

son1.vue

<div>
  <!-- 定义插槽 -->
  <!-- 定义能够用来被替换的构造 -->
  <slot> 内容 </slot>
</div>
<div> 底部 </div>

具名插槽

父组件

index.vue

<son2>
  <!-- 简写模式 vant -->
  <template #content>I'm content</template>
  <template #foot>I'm foot</template>

  <!-- 原始模式 -->
  <template v-slot:content>I'm content</template>
  <template v-slot:foot>I'm foot</template>

  <!-- 被废除的用法：element -->
  <template slot="content"> 我是内容 </template>
  <template slot="foot"> 我是底部 </template>
</son2>

components: {son2: () => import('./son2.vue'),
}

子组件

son2.vue

<div>
  <!-- 定义插槽 -->
  <!-- 定义能够用来被替换的构造 -->
  <slot name="content"> 内容 </slot>
</div>
<div>
  <slot name="foot"> 底部 </slot>
</div>

默认插槽

父组件

index.vue

<son3>
  <template slot="content"> 我是内容 </template>
  <template slot="foot"> 我是底部 </template>
  <template #default>
    我是头部的默认插槽
  </template>
</son3>

components: {son3: () => import('./son3.vue'),
}

子组件

son3.vue

<div>
  <!-- 没有 name 属性的插槽叫做默认插槽 -->
  <slot> 头部 </slot>
</div>
<div>
  <slot name="content"> 内容 </slot>
</div>
<div>
  <slot name="foot"> 底部 </slot>
</div>

作用域插槽

父组件

index.vue

    <son4>
      <!-- 给每本书增加一个《》-->
      <!-- 简写模式：vant -->
      <template #content="{list,a}">
        <ol>
          <li v-for="(item, index) in list" :key="index">《{{item.name}}》</li>
        </ol>
      </template> 

      <!-- 原始模式 -->
      <template v-slot:content="{list}">
        <ol>
          <li v-for="(item, index) in list" :key="index">《{{item.name}}123》</li>
        </ol>
      </template>

      <!-- element 中被废除的写法 -->
      <template slot="content" slot-scope="{list, a}">
        <ol>
          <li v-for="(item, index) in list" :key="index">《{{item.name}}》</li>
        </ol>
        <div>a:{{a}}</div>
      </template>
    </son4>

子组件

son4.vue

<div>
  <slot name="content" :list="list" a="a">
    <ol>
      <li v-for="(item, index) in list" :key="index">
        {{item.name}}
      </li>
    </ol>
  </slot>
</div>

data () {
  return {
    list: [{ id: 1, name: '三国演义'},
      {id: 2, name: '红楼梦'},
      {id: 3, name: '西游记'},
      {id: 4, name: '水浒传'}
    ]
  }
}