vue學習高級特性(一)--三種插槽(slot)用法

本章主要是講slot插槽部分，分【slot的基本使用】、【slot的具名插槽】、【slot的作用域插槽】講解。

 

• 插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。
• 插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪裏顯示就由子組件來進行控制。

一、單個插槽slot的基本使用

當子組件模板只有一個沒有屬性的插槽時， 父組件傳入的整個內容片段將插入到插槽所在的 DOM位置， 並替換掉插槽標籤本身

子組件：

<template>
  <div>
    <a :href="url">
      <slot>
        默認顯示，父組件沒有內容時候顯示
      </slot>
    </a>
  </div>
</template>

<script>
export default {
  // 子組件
  name: 'childSlot1',
  props:['url']
}

</script>

父組件：

<template>
  <div>
    <child-slot1 :url="url">
      <span>我是父組件傳遞進來的內容</span>
    </child-slot1>
  </div>
</template>

<script>
import childSlot1 from './childSlot1'
export default {
  // 父組件
  name: 'Index',
  data(){
    return {
      url: 'https://www.baidu.com'
    }
  },
  components: {
    childSlot1
  }
}
</script>

父組件中可以在子組件裏面填入內容(也可以不填)，如上面span標籤的內容！如果不填默認爲子組件slot的內容。

二、具名插槽

solt元素可以用一個特殊的特性name來進一步配置如何分發內容。 多個插槽可以有不同的名字。 這樣可以將父組件模板中 slot 位置， 和子組件slot元素產生關聯，便於插槽內容對應傳遞

子組件：定義slot標籤，然後用name去定義不同的名字。

<template>
  <div>
    <a :href="url">
      <div>
        <slot name="header">
          頭部導航
        </slot>
      </div>
      <div>
        <slot name="footer">
          尾部導航
        </slot>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  // 子組件
  name: 'childSlot1',
  props:['url']
}
</script>

父組件：在子組件裏面填寫template，然後寫上v-slot,然後用名字區分來源於不同的插槽。

<template>
  <div>
    <child-slot1 :url="url">
      <template v-slot:header>
        <span>父組件改變頭部導航</span>
      </template>
      <template v-slot:footer>
        <span>父組件改變尾部導航</span>
      </template>
    </child-slot1>
  </div>
</template>

<script>
import childSlot1 from './childSlot1'
export default {
  // 父組件
  name: 'Index',
  data(){
    return {
      url: 'http://www.imooc.com'
    }
  },
  components: {
    childSlot1
  }
}
</script>

三、作用域插槽

作用域插槽 使用場景： 由外部（父組件）指定子組件 template 中循環列表的結構，父組件可以獲取子組件定義好的數據。

子組件：

<template>
  <div>
    <a :href="url">
      <slot :slotData="website">
        {{website.subTitle}}
      </slot>
    </a>
  </div>
</template>

<script>
export default {
  // 子組件
  name: 'childSlot1',
  props:['url'],
  data () {
    return {
      website: {
        url: 'https://www.imooc.com',
        title: '慕課網',
        subTitle: '程序員的最愛學習網站'
      }
    }
  }
}
</script>

父組件：

<template>
  <div>
    <child-slot1 :url="url">
      <!-- slotProps的名字可以隨便取 -->
      <template v-slot="slotProps">
        {{slotProps.slotData.title}}
      </template>
    </child-slot1>
  </div>
</template>

<script>
import childSlot1 from './childSlot1'
export default {
  // 父組件
  name: 'Index',
  data(){
    return {
      url: 'http://www.baidu.com'
    }
  },
  components: {
    childSlot1
  }
}
</script>