vue插槽詳解

vue 插槽

vue 插槽是溝通父子組件排版內容的分發

通常都是在父組件中寫內容,在子組件中寫插槽預留位置

若是不寫插槽會怎樣?那麼夾在根標籤的內容都不會顯示出來

插槽

匿名插槽

最簡單,只須要在父組件中預留HTML,在子組件中寫slot就好

父組件

<template>
    <div class="father">
        <h3>這裏是父組件</h3>
        <child>
            <div class="tmpl">
              <span>菜單1</span>
              <span>菜單2</span>
              <span>菜單3</span>
              <span>菜單4</span>
              <span>菜單5</span>
              <span>菜單6</span>
            </div>
        </child>
    </div>
</template>

子組件

<template>
    <div class="child">
        <h3>這裏是子組件</h3>
        <slot></slot>
    </div>
</template>

渲染結果以下:

具名插槽:

在子組件中寫 <slot name="xxx">

在父組件中寫 slot="xxx"

父組件

<template>
  <div class="father">
    <h3>這裏是父組件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜單1</span>
        <span>菜單2</span>
        <span>菜單3</span>
        <span>菜單4</span>
        <span>菜單5</span>
        <span>菜單6</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜單-1</span>
        <span>菜單-2</span>
        <span>菜單-3</span>
        <span>菜單-4</span>
        <span>菜單-5</span>
        <span>菜單-6</span>
      </div>
      <div class="tmpl">
        <span>菜單->1</span>
        <span>菜單->2</span>
        <span>菜單->3</span>
        <span>菜單->4</span>
        <span>菜單->5</span>
        <span>菜單->6</span>
      </div>
    </child>
  </div>
</template>

子組件:

<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>這裏是子組件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

渲染結果

做用域插槽

做用域插槽 比前面的多了一個功能能 ,我能夠在子組件的做用域綁定數組啦

<slot name="up" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    },
}

因而狀況就變成啦,樣式父組件說了算，但內容能夠顯示子組件插槽綁定的。

父組件:

<template>
  <div class="father">
    <h3>這裏是父組件</h3>
    <!--第一次使用：用flex展現數據-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
​
    </child>
​
    <!--第二次使用：用列表展現數據-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>
​
    </child>
​
    <!--第三次使用：直接顯示數據-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>
​
    </child>
​
    <!--第四次使用：不使用其提供的數據, 做用域插槽退變成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>

子組件

<template>
  <div class="child">
​
    <h3>這裏是子組件</h3>
    // 做用域插槽
    <slot  :data="data"></slot>
  </div>
</template>
​
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

渲染結果:

參考文章:http://www.javashuo.com/article/p-npiplmpf-dm.html