插槽与作用域插槽的区别

当我们在Vue.js中开发组件时，插槽（Slots）和作用域插槽（Scoped Slots）都是重要的工具，它们帮助我们构建灵活且可复用的组件。以下将结合代码详细介绍两者的区别：

插槽（Slots）

插槽允许父组件在子组件模板的特定位置插入内容。这是通过子组件的<slot>元素定义的，父组件通过其内容填充这些位置。

子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件标题</h2>
    <slot></slot> <!-- 预留插槽位置 -->
  </div>
</template>

父组件（ParentComponent.vue）

<template>
  <div>
    <h1>父组件标题</h1>
    <child-component>
      <!-- 父组件内容插入到子组件的slot位置 -->
      <p>这是一段来自父组件的文本。</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

在上面的例子中，父组件的<p>元素内容被插入到了子组件的<slot></slot>位置。插槽的内容和作用域都属于父组件。

作用域插槽（Scoped Slots）

作用域插槽允许子组件向父组件传递数据，并且父组件可以基于这些数据自定义渲染内容。这通常通过v-slot指令（在Vue 2.6+中引入，替代了之前的slot-scope属性）实现。

子组件（ChildComponentWithScope.vue）

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <!-- 使用slot将item传递给父组件 -->
        <slot name="item" :item="item"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ...
      ]
    };
  }
}
</script>

父组件（ParentComponentWithScope.vue）

<template>
  <div>
    <h1>父组件标题</h1>
    <child-component-with-scope>
      <!-- 使用v-slot接收子组件传递的item -->
      <template v-slot:item="{ item }">
        <span>{{ item.name }}</span>
      </template>
    </child-component-with-scope>
  </div>
</template>

<script>
import ChildComponentWithScope from './ChildComponentWithScope.vue';

export default {
  components: {
    ChildComponentWithScope
  }
}
</script>

在这个例子中，子组件遍历items数组，并为每个item创建了一个<slot>元素，同时传递了item作为属性。父组件通过v-slot:item="{ item }"定义了作用域插槽，并且可以访问item属性来定制渲染的内容。这样，父组件就能够根据子组件传递的数据动态地渲染列表项。

总结

插槽：父组件向子组件的预留位置插入内容，这些内容完全由父组件定义。
作用域插槽：子组件向父组件传递数据，父组件根据这些数据自定义渲染内容。作用域插槽允许父组件访问子组件的内部数据，并决定如何展示这些数据。

在实际应用中，根据需求选择合适的插槽类型。如果只是简单地需要在子组件的某个位置插入一些静态或动态内容，可以使用普通的插槽。如果需要子组件传递数据给父组件，并且父组件需要基于这些数据定制渲染，那么应该使用作用域插槽。

Br不二