vue - 插槽

vue官网中在2.6版本之后 插槽语法写法有过变动; 这边文章主要是参考官网和其他博客综合写的; 代码亲测有效,部分写法问题如果有疑问,可以自行官网
个人理解:
插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

1. 匿名插槽

• 匿名插槽是指直接使用slot标签, 通过slot标签,可以直接在子组件中分发我们想要写入的内容

1.1 代码示例

• 父组件

• 子组件

• 页面效果

  
  
  image.png

2. 具名插槽

概念: 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中

2.1 代码示例

• 子组件

• 父组件

• 页面效果

  
  
  image.png

3. 带有作用域的插槽

概念: 把子组件data中的数据或者子组件props中的数据传到父组件的插槽中使用;

3.1 代码示例

• 子组件

如果只有一个作用域插槽,可以不用写成具名插槽的形式; 如果是多个作用域插槽,需要给每个作用域插槽添加名字进行区分, 否则父组件在进行内容分发时,页面会显示异常;
此处时模拟的多个作用域插槽, 添加了name属性进行区分; 如果只有一个可以将name属性删除;

• 父组件

由于当前的作用域插槽时具名插槽, 所以在父组件中的位置可以随意放置, 都可以将内容分发到子组件中的指定位置;

• 页面效果

  
  
  image.png

参考
vue slot 插槽详解