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>

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

相关推荐