Vue组件高级 插槽的使用slot

slot的基本使用

  • 组件的插槽是为了让封装的组件更加具有扩展性
  • 让使用者可以决定组件内部的一些内容到底展示什么
  • 如何去封装这类的组件 使用slot

    • 如果每一个单独去封装一个组件,显然不合适;比如每个页面都返回,这部分就要重复封装
    • 但是,如果封装成一个,也不合理,有些左侧是菜单,有些是返回等等
  • 如何封装合适

    • 抽取共性,保留不同
    • 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽
    • 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容
  • 插槽的基本使用
  • 插槽的默认值
  • 如果有多个值,同时放入到组件进行替换时,一起作为替换元素

      
    哈哈啊哈 呵呵呵

具名插槽的使用

给slot id 更易使用 区分插槽

    
标题

作用域插槽

编译作用域

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

  *  中,我们使用了isShow属性
  * isShow属性包含在组件中,也包含在Vue实例中

* 可以渲染出来

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

    

作用域-插槽

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


你可能感兴趣的:(Vue组件高级 插槽的使用slot)