vue 插槽的使用

今天学习到插槽，觉得是个很好的东西，赶紧记录下。

1，基本使用，以下摘自官网https://vuejs.bootcss.com/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9

以下为深入理解

2，插槽内容，插槽内容可以是字符串，可以是HTML，也可以是组件。

3，作用域

4，后备内容，当父组件没有提供任何插槽内容时，可显示默认内容。

5，具名插槽

当我们需要在一个组件中显示多个插槽的时候，我们需要给插槽命名。

v-slot 也是有缩写的，缩写符号为#，之后的例子会用缩写。

6，作用域插槽

有时我们需要让插槽内容能够访问子组件中才有的数据，但是由于作用域的关系，父组件不能直接访问到子组件的数据，那么怎么办呢，请看下面的例子

<!-- SlotDemo 组件 -->

<template>
  <div>
    <header>
      <slot name="header" :slotDemo="slotDemo"></slot>  <!-- 绑定 -->
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'SlotDemo',
  data () {
    return {
      slotDemo: '插槽props'  //数据
    }
  }
}
</script>

父组件使用

<SlotDemo>
    <!-- 接收slotDemo  -->
    <!-- #header="{ slotDemo }"为缩写，原写法为：v-slot:header="{ slotDemo }" -->

    <template #header="{ slotDemo }">
       <h1>Here might be a page title</h1>
       <h2>{{slotDemo}}</h2>
    </template>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <template #footer>
       <p>Here's some contact info</p>
    </template>
</SlotDemo>

页面显示如下

注意v-slot只能用在template模板上。当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上。

7，插槽的使用例子

 <!-- slotDemo.vue  -->

<template>
  <ul>
    <li 
      v-for="todo in filteredTodos" 
      :key="todo.id"
    >
      <slot name="todo" :todo="todo">
       {{todo.text}}
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'SlotDemo2',
  data () {
    return {
      filteredTodos: [
        {id: 0, text: '你好0', isComplete: true},
        {id: 1, text: '你好1', isComplete: false},
      ]
    }
  }
}
</script>

 

<!-- 父组件的使用  -->

<SlotDemo>
    <template #todo="{ todo }">
        <span v-if="todo.isComplete">✓</span>
        {{ todo.text }}
    </template>
</SlotDemo>

页面显如下

更详细的内容参见官网哦~

https://vuejs.bootcss.com/guide/components-slots.html