slot的使用(2.6.0之后)

slot，即：插槽，在组件定义的时候

• 想不到使用的地方会写入什么内容

• 不知道外部需要以什么形式呈现

那么，我们就可以使用slot

• 把不确定的内容预留出来

• 不确定的展现形式的内容拿给外部展示

其他内容跟按照正常的形式书写即可

一般我们使用组件的时候，里面是不会有内容的，即：<home></home>，但是我们定义了插槽，那么我们就可以将我们需要插入的地方写到组件里面即可。

基本使用

    <div id="app">
      <home>
        <div>this is slot content</div>
        <div>this also is slot content</div>
      </home>
    </div>

      new Vue({
   
        components: {
   
          home: {
   
            template: `
            <div>
              start
              <div style="backgroundColor: red;">
                <slot>default content</slot>  
              </div>
              end
            </div>`
          }
        }
      }).$mount(