关于前端: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: '水浒传' }
    ]
  }
}