细谈Vue中插槽Slots

---

浅谈Vue中插槽Slots

• 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
• Vue 组件的插槽机制是受原生 Web Component 元素的启发而诞生，同时还做了一些功能拓展
• vue的slot主要分三种，默认插槽，具名插槽，作用域插槽；使用插槽是在存在父子关系的组件中使用，我们可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息
• 插槽 Slots | Vue.js (vuejs.org)

---

1、默认插槽

• 作用：让组件内部的一些结构支持自定义
• 场景：将需要多次显示的对话框，封装成一个组件；组件的内容不希望写死，需要自定义。此时可以使用slot占位封装

• 插槽基本使用:

  • 组件内需要定制的结构部分，改用占位
  • 使用组件时,标签内部,传入结构替换slot

  success
  

• 插槽内可以包含任何模板代码，包括HTML、组件

• 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的

---

2、后备内容

• 场景：通过插槽完成了内容的定制，传什么显示什么，但是如果不传，则是空白，此时可以给插槽设置默认显示内容

• 插槽后备内容(默认值)基本使用：

  • 在标签内放置内容，作为默认显示内容
  • 外部使用组件时，不传东西，则slot会显示后备内容
  • 外部使用组件时，传东西了，则slot整体会被换掉

---

3、具名插槽

• 场景：一个组件内有多处结构，需要外部传入标签，进行定制

• vue 2.6.0 版本使用具名插槽和作用域插槽有了新的统一语法，使用v-slot替换了之前的slot和slot-scope

• 具名插槽基本使用：

  • 多个slot使用name属性区分名字
  • template配合v-slot:名字来分发对应标签

  
  
  //动态插槽名
  
  
  //简化写法
  
  

• 如果一个不带name属性的话，那么它的name默认为default

• 一般情况下，v-slot只能添加在一个