理解vue中的插槽------slot与slot-scope

vue当中的插槽，指的即是slot，是组件当中的一块HTML模板。该模板是否显示，以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ，你将slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块！

单个插槽

单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性，也可以称其为匿名插槽。
先来看一个例子。
父组件：

子组件：

在上面例子中，父组件在里面写了html模板，子组件的slot会被该模板覆盖掉！也可以说子组件的插槽被使用了，最终会是下面这个样子：

 

        
我是一个父组件
        

            
我是子组件
            

                有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
            
        
 

• 如果子组件有多个匿名插槽，均会被使用，我们来将子组件修改下：

运行之后会变成这个样子：

 

        
我是一个父组件
        

            
我是子组件
            

                有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
            
            

                有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
            
            

                有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
            
        
 

然后看一下console:

[Vue warn]: Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors.

没错，飘红了！为什么？因为Vue 2.0中不允许有重名的slot。如果你没有代码洁癖的话，现在就可以下班闪人了！等着后面同事用你组件时来向你抱怨！如果要在不同位置渲染同一内容，你可以用 prop 来传递。

具名插槽

匿名插槽是没有名字的插槽。如果给插槽加上name属性，我们可以将其称为具名插槽！
再来看个例子。
父组件：

子组件：

最终渲染的结果：

    
我是一个父组件
    
    

        
我是子组件
        
老张
        
老王
        
老李
    

可以看出父组件通过模板上添加slot属性与具名插槽的进行关联。没有slot属性的html模板默认关联匿名插槽。

作用域插槽

作用域插槽与前面两种插槽相比，作用域插槽是要在slot上面绑定数据的。所以我们也可以称作用域插槽为带数据插槽。
再来看一下之前两种插槽的写法：

作用域插槽需要绑定上数据：

父组件：

赶紧动手试试吧！

—————END—————

喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容