vue的插槽

78 阅读1分钟

vue的插槽 插槽是什么?

  • 插槽就是子组件中的提供给父组件使用的一个占位符,用slot闭合标签 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的slot标签。
  • 简单理解就是子组件中留下个“坑”,父组件可以使用指定内容来补“坑”。以下举例子帮助理解。
  • 匿名插槽
    • 没有名字(其实默认名字为default),只有一个,父组件不指定,就往这个里面填
  • 具名插槽
  • 可以有多个,命不同的名字,父组件指定名字进行填充
  • 作用域插槽
  • slot-scope =xxx ,xxx是父组件给命的名字,对应子组件绑定到slot的数据,随意起名,可以让父组件组件使用子组件里边的数据,访问方式为xxx.xxx 在 2.6.0 中,为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。注意slot版本变化,vue2中仍可以使用slot与slot-scope,但是vue3只能使用v-slot了,切记,避免踩坑。