Vue.js 插槽详解

文章目录

• • 插槽的作用
  • 插槽的使用
  • • 1.默认插槽
    • 2.具名插槽
    • 2.作用域插槽

插槽的作用

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

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

插槽的使用

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

1.默认插槽

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

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

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

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

2.具名插槽

具名插槽是带有名称的插槽，用于将父组件中的内容插入到子组件中指定名称的插槽中。具名插槽可以通过标签的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>

在子组件的模板中，可以通过标签的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>

在子组件中，我们使用slot标签将list数据作为作用域插槽传递给父组件。在父组件中，我们使用slot-scope属性来定义一个变量slotProps，该变量用于访问子组件中传递过来的数据。然后，我们就可以在父组件中使用该变量来访问子组件中的数据了。

作用域插槽可以帮助我们实现更加复杂的动态组件，例如列表、表格等。