Vue學習Day03-Vue具名插槽slot(name)和作用域插槽slot(slot-scope)

以下是學習筆記:

　　1.前面學習的默認插槽可以理解為一個默認的坑,沒有任何表示,html代碼可以往里面"填坑"

　　2.具名插槽擁有了name屬性,它成為該坑的表示,當往組件里面寫得html標簽帶上slot="具名插槽名"時,這些html代碼將有方向性地"填坑"到具有表示name的插槽中.可以說,name屬性給不同插槽以標識符

　　3.作用域插槽,當插槽擁有了一些屬性,而填入坑中的標簽想要使用時.可以給這些標簽加上slot-scope屬性,並將該屬性值存放到一個對象obj中,這樣可以在標簽中以`{{obj.屬性名}}`的方式訪問到插槽具有的屬性(目前還未學習到具體使用場景)

 

　　具名插槽:

<div id="app">
      <!-- 1.2 想要指定插入指定位置，就得指定一下插入到slot的名字，通過slot屬性來指定, 這個slot的值必須和下面slot組件得name值對應上 -->
      <index>
        <h1 slot="header">頭部</h1>
        <p slot="footer">底部</p>
      </index>
    </div>
    <script>
      // 1.1. 通過給slot添加name屬性，來指定當前slot的名字
      Vue.component('index', {
        template: `
          <div>
            <slot name="header"></slot>
            index
            <slot name="footer"></slot>
          </div>
　　　　 `
      })
　　...
</script>

　　作用域插槽:

<div id="app">
      <!--  -->
      <index>
        <!-- 1.2 給這里需要取出slot中屬性值得標簽（也就是p）定義一個屬性：slot-scope，它的值是一個對象，這個對象中保存的有下面slot中所有得屬性 -->
        <p slot-scope="obj">{{obj.company}}版權所有{{obj.title}}</p>
      </index>
    </div>
    <script>
      // 1.1 現在slot組件攜帶了屬性，想把他們取出來怎么辦？需要用到作用域插槽
      Vue.component('index', {
        template: `
          <div>
            index
            <slot title="vue學習" company="itcast" $index="111"></slot>
          </div>
        `
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>