Vue组件高级|Vue组件高级插槽的使用slot Vue组件高级插槽的使用slot

slot的基本使用

组件的插槽是为了让封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么
如何去封装这类的组件使用slot
- 如果每一个单独去封装一个组件，显然不合适；比如每个页面都返回，这部分就要重复封装
- 但是，如果封装成一个，也不合理，有些左侧是菜单，有些是返回等等
如何封装合适
- 抽取共性，保留不同
- 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽
- 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容
插槽的基本使用
插槽的默认值
【Vue组件高级|Vue组件高级插槽的使用slot】如果有多个值，同时放入到组件进行替换时，一起作为替换元素

哈哈啊哈呵呵呵

具名插槽的使用
给slot id 更易使用区分插槽

标题

作用域插槽
编译作用域

我们通过例子理解这个概念
首先考虑下面的代码是否可以渲染出来

*　　中，我们使用了isShow属性
*　isShow属性包含在组件中，也包含在Vue实例中
*　可以渲染出来
*　官方给了一条准则：父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。
*　而我们使用时候，整个组件的使用过程相当于在父组件中出现的
*　那么他的作用域就是父组件，使用的属性也是属于父组件的属性
*　因此，isShow使用的是Vue实例中的属性，而不是子组件的属性

作用域-插槽 *　作用域插槽是slot一个比较难理解的点
*　这里，我们用一句话对其做一个总结
*　父组件替换插槽的标签，但是内容由子组件来提供