vue基础(九)

Vue 提供 插槽(Slot) 机制,使组件可以更灵活地复用和拓展内容。插槽允许父组件向子组件传递结构化的内容。

1. 默认插槽(Default Slot)

默认插槽允许父组件传递内容到子组件的特定位置。







结果:

我是父组件传递的内容

  • 如果 ChildComponent 没有提供插槽内容,slot 的默认内容(默认内容)会显示。
  • 但如果 Parent.vue 提供了内容,则它会替换 slot 位置的默认内容。

2. 具名插槽(Named Slots)

具名插槽用于多个插槽的情况,允许父组件向不同位置插入不同的内容。





结果:

我是自定义标题

我是主要内容

我是自定义页脚
  • #header#footer 代表对应的具名插槽,只有 p 直接放入的内容属于默认插槽。

3. 作用域插槽(Scoped Slot)

作用域插槽允许子组件将 数据 传递给父组件,以便父组件可以决定如何渲染内容。







结果:

用户名:Alice

年龄:25

  • 子组件 ChildComponent.vue 通过 slot 传递 userData 数据。
  • 父组件 Parent.vue 通过 v-slot="{ user }" 结构解构 user 并使用它。

简写:


  

用户名:{{ user.name }}

4. 具名作用域插槽(Scoped Named Slot)

可以结合具名插槽和作用域插槽。





结果:

用户信息:Alice,年龄 25

  • 子组件的 slot name="profile" 传递 userData
  • 父组件 #profile="{ user }" 绑定数据,并自定义显示方式。

5. 动态插槽名

如果插槽名是动态的,可以用 :name 绑定。







总结

插槽类型 语法 用途
默认插槽 允许父组件传递内容
具名插槽 允许多个插槽分别填充不同内容
作用域插槽 子组件提供数据,父组件决定如何渲染
具名作用域插槽 结合具名插槽和作用域插槽
动态插槽 插槽名动态可变

你可能感兴趣的:(面试,vue.js,前端,javascript)