Vue 组件 / 插槽

编译作用域

{{message}}

在vue组件中作用域简单的说就是：

父组件模板的内容在父组件的作用域内编译，子组件模板的内容在子组件的作用域内编译

一个常见的错误是我们会试图在父组件内将一个指令绑定到子组件的属性/方法

如果someChildProperty是子组件的属性，那么这种做法是无效的，在vue中父模板是不应该知道子组件状态的，如果想要通过子组件的someChildProperty来控制子组件的show/hide，那么应该在子组件内对其进行设置

单个插槽

在我们使用组件时，父组件在子组件标签内写入的内容都会被丢弃，例如

    
父组件的内容
  

如果我们想要在子组件渲染时能够渲染出父组件添加的内容，需要为子组件组件中设置slot插槽

当子组件内只有一个没有属性的插槽时，父组件在调用子组件时在子组件内添加的内容将全部插入到插槽所在的DOM节点的位置，并替换掉插槽标签本身

最初在插槽标签内的任何元素都将会被视为默认内容，默认内容在子组件的作用域内编译，只有在宿主元素为空，且没有插入内容的时候才显示

    
This's parent
    
        
推荐好友列表
        

            
tom
        
    

具名插槽

slot元素可以用一个特殊的属性name来配置如何分布内容，多个插槽可以有不同的名字，设置有name属性的插槽会匹配到父组件中具有相同值的具有slot属性的元素

仍然可以有匿名的插槽，它会作为默认插槽存在，在插槽找不到匹配的slot值或不具有name的插槽会被插入到匿名的插槽中

    
具名插槽
    
        
{{parentMsg}}
        
Test
        

            
1.父组件数据
            
2.展示slot使用方法
        
        
parentFooter
    

作用域插槽

+2.1.0新增

作用域插槽是一种特殊类型的插槽，可以用来将子组件的数据展示到slot插槽中

在子组件中，只需要将数据传递到插槽，就像我们将props传递给组件一样，格式为

在父级中，具有特殊属性的的scope的template元素必须存在，表示这是作用域插槽的模板，scope的值对应一个临时变量名，此变量接收从子组件中传递的props对象，格式为:

在2.5.0之后的版本官方用slot-scope替换了scope

这种用法在我们使用Element时非常常见，例如在使用表格组件时需要根据后台返回的1、2、3展示对应状态已完成、未完成、已驳回

在使用slot-scope时，支持es 6 的对象解构语法，例如上面的例子，我们可以改写为