Vue插槽

96 阅读1分钟

插槽 -默认插槽

  • 让组件内部的一些 结构 支持 自定

使用步骤:

  1. 先在组件内用 slot 占
  2. 使用组件时, 传入具体标签内容插入
  3. 当使用组件并未给我们传入具体标签或内容时,在slot标签内,写好后备内容 

插槽 - 具名插槽

使用步骤:

  1. slot占位, 给name属性起名字来区分

  2. template配合 v-slot:插槽名 分发内容

  3. v-slot:插槽名 可以简化成 #插槽名

插槽 - 作用域插槽

使用步骤:

  1. 给 slot 标签, 以 添加属性的方式传值

  2. 所有添加的属性, 都会被收集到一个对象中

  3. 在template中, 通过 ` #插槽名= "obj" ` 接收,默认插槽名为 default