vue框架之slot與slot-scope及其做用域

前言： slot和slot-scope屬於vue的高階特性, 主要用於在自定義組件內插入原生的HTML元素，如：

<my-component>
    <div>自定義組件內插入原生HTML元素</div>
</my-component>複製代碼

1 . slot

首先聲明一個子組件:

### Item.vue
<template>
  <div>
    <h3>子組件標題</h3>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            value: 456
        }
    }
  }
</script>複製代碼

### App.vue (父組件或者根組件)
<template>
  <div class="app">
    <h2>父組件標題</h2>
    <item>
        <p slot="header">this is header slot---header: {{value}}</p>
        <p slot="footer">this is footer slot --footer: {{value}}</p>
    </item>
  </div>
</template>

<script>
  import Item from './Item.vue'

  export default {
    name: 'app',
    data () {
        return {
            value: 123
        }     
    }
    components: {
      Item
    }
  }
</script>複製代碼

從測試可得，此時

header和footer的value均爲123而非456,由於使用了當前組件App而非子組件Item的做用域複製代碼

如要顯示子組件Item內做用域的value,需設置slot-scope屬性，以下:

### Item.vue
<template>
  <div>
    <h3>子組件標題</h3>
    <slot name="header" :value="value" a="bcd"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            value: 456
        }
    }
  }
</script>複製代碼

### App.vue (父組件或者根組件)
<template>
  <div class="app">
    <h2>父組件標題</h2>
    <item>
        <p slot="header" slot-scope="props">
            this is header slot---header: {{value}}    // 此處value仍是123
            item value: {{props.value}}                // 該處value返回456
            props返回一個對象: {{props}}                // { "value": 456, "a": "abc" }
        </p>
        <p slot="footer">this is footer slot --footer: {{value}}</p>
    </item>
  </div>
</template>複製代碼

總結： 

1 . 使用slot能夠在自定義組件內插入原生HTML元素，須要搭配使用name和slot屬性，不然多個slot可能會返回重複的HTML元素。

2 . 使用slot-scope能夠將slot內部的做用域指向該子組件，不然默認做用域指向調用slot的父組件。