VUE 插槽: Slot

Slot

升级版组件(代码替换)

• 组件的插槽可让封装的组件更加具有扩展性。
• 让使用者可以决定组件内部的一些内容到底展示什么。
• 封装技巧 抽取共性 保留不同

基本使用

• 默认内容(如果父组件传有东西，则会替换掉默认的内容) 放入组件中。
• 在组件标签插入的所有内容是属于 slot 插槽的

具名插槽

1. 父组件中使用 slot 区域时，不用名字，操作的就是没有名字的 slot
2. 要修改 使用有名字的 slot,必须绑定与之相对的 slot 的 name 到父组件的 slot 属性上。

使用注意点

• 当要对 slot 动态绑定属性事件或渲染方式时
• 最好在 slot 外层套一层 div,并在该 div 上写插槽的需要的功能。因为使用组件的具名插槽时，会直接替换掉默认的 slot

---

作用域插槽

**   ** 父组件替换插槽的内容，但替换的数据是由子组件（子组件作用域的内容）来提供的

---

编译作用域

1. 父组件模板的所有东西都会在父作用域内编译（data 之类的数据用的也是父实例的）
2. 子组件模板的所有东西都会在子作用域内编译（data 之类的数据用的也是子实例的）

》》效果《《