插槽

1、插槽的内容

• 文字
• html（div，span之类的标签）
• 组件

文字：
组件里的内容是不能显示的，用了slot就可以显示出来

    

        
             hello
        
    
    

插槽内容1.png

html标签：
这里的slot渲染的p标签

    

        
            
hello
        
    
    

插槽内容2.png

组件：
插入组件呢？如下

    

        
             hello
             
        
    
    

插槽内容3.png

注意：
如果 没有包含一个 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

2、后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染

这里设置一个submit-button组件，组件里没有内容。设置一下模板，模板里是button按钮。

后备内容1.png

这里把slot里面放入submit。submit-button里还是没有内容

Vue.component('submit-button',{
            template:`
                            submit
                        `
        })

后备内容2.png

如果submit-button里面放入内容，那么slot里面的内容会被覆盖，就不会显示出来

        
            save
        
    

后备内容3.png

3、具名插槽

我们写一个base-layout的组件，模板内容有header、main、footer标签，里面都有slot，slot内容为空。header和footer分别设置了name，main没有设置name

此时渲染成：

具名插槽1.png

• 此时我们给组件上内容，在向具名插槽提供内容的时候，我们可以在一个