Vue.js 插槽详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue.js 插槽详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

插槽的作用

插槽允许我们在父组件中定义子组件的模板内容，从而实现动态组件的功能。具体来说，插槽可以用于以下场景：

父组件向子组件传递内容，例如按钮、表单、图片等。
子组件需要显示不同的内容，例如列表、选项卡、面包屑等。

插槽的使用

Vue.js 提供了三种类型的插槽：具名插槽、默认插槽、作用域插槽

1.默认插槽

默认插槽是没有名字的插槽，用于将父组件中的内容插入到子组件中指定的位置。默认插槽可以通过<slot>标签来定义。

例如，在父组件中定义一个按钮，并将按钮作为默认插槽传递给子组件：

<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <button>提交</button>
    </my-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

在子组件的模板中，可以通过<slot>标签来指定按钮应该显示的位置。这样，当子组件被渲染时，父组件中的按钮就会显示在指定位置。

2.具名插槽

具名插槽是带有名称的插槽，用于将父组件中的内容插入到子组件中指定名称的插槽中。具名插槽可以通过<slot>标签的name属性来定义。

例如，在父组件中定义两个按钮，并将它们作为具名插槽传递给子组件：

<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <template v-slot:submit>
        <button>提交</button>
      </template>
      <template v-slot:cancel>
        <button>取消</button>
      </template>
    </my-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="submit"></slot>
    <slot name="cancel"></slot>
  </div>
</template>

在子组件的模板中，可以通过<slot>标签的name属性来指定具名插槽的名称。这样，当子组件被渲染时，父组件中的按钮就会显示在对应的插槽位置。

2.作用域插槽

作用域插槽是一种特殊的插槽，可以将子组件中定义的数据传递到父组件中进行使用。具体来说，作用域插槽允许我们在子组件中使用slot-scope属性来定义一个变量，然后在父组件中使用该变量来访问子组件中的数据。

例如，在子组件中定义一个数据list，并将其作为作用域插槽传递给父组件：

<!-- 子组件 -->
<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <slot :list="list"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <template v-slot:default="slotProps">
        <ul>
          <li v-for="item in slotProps.list" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </template>
    </my-component>
  </div>
</template>