Vue插槽学习理解

阅读之前

本文主要参照了Vue官方文档的插槽部分说明,中间加入的自己的理解,写的比较简洁易懂。各位看官可以对照官方文档和本文的介绍来理解slot插槽语法。

Vue 插槽(2.60版本以后)

插槽可以让通用组件更加多样化,它类似React中的children。

声明:以下所有内容以父级(通用)组件和应用(调用)组件的关系举例说明。

  • 最简单的使用

比如你想声明一个带有特殊border的div作为一个通用组件BorderedDiv。


在使用该组件时


  

被包裹的文字

这时你会想到:这个文字如何传递给父级组件呢?

直接这样写就好:


  • 作用域


    {{ data }}
    

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

简单来说:你不能在写children的时候直接使用父级组件中的数据,考虑当前环境。

  • 后备内容

标签中的内容将在没有匹配到插槽内容时渲染

 如果没有children,我就会渲染

如果父级模板中声明了插槽,但是应用组件却没有包裹任何内容,它便会渲染为备用内容。

  • 具名

可以给 传递name属性

然后这样向对应的插槽传递内容:


    
    // 可以不用包裹template 直接传递给default slot
    
    
    

其中: