vue的插槽

前言

插槽在使用vue開發項目中的使用頻率仍是挺高的，無論是自定義組件仍是引用的UI組件庫，插槽的使用能夠必定程度上提示組件的可拓展性等。

1、具名插槽

使用場景：單純的想在父組件內自定義子組件的內容結構。

// 父組件App
<template>
  <div id="app">
    <my-slot>
      {{value}}
    </my-slot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'
export default {
  name: 'app',
  data() {
    return {
      value: 'hello world'
    }
  },
  components: {
    MySlot
  }
}
</script>

// 子組件MySlot
<template>
    <div>
        <slot></slot>
    </div>
</template>
複製代碼

2、做用域插槽

使用場景：更改子組件對應做用域的內容。

// 父組件App
<template>
  <div id="app">
    <my-slot>
      <template v-slot:mySlot>
        <div>
          {{value}}
        </div>
      </template>
    </my-slot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'
export default {
  name: 'app',
  data() {
    return {
      value: 'hello world'
    }
  },
  components: {
    MySlot
  }
}
</script>

// 子組件MySlot
<template>
    <div>
        <slot name='mySlot'></slot>
    </div>
</template>
複製代碼

3、子組件經過做用域插槽傳遞參數到父組件

使用場景：須要在父組件自定義內容中使用子組件的數據。

// 父組件App
<template>
  <div id="app">
    <my-slot>
      <template v-slot:mySlot='{childValue, one}'>
        <div>
          {{value}}
          {{childValue}}
          {{one}}
        </div>
      </template>
    </my-slot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'
export default {
  name: 'app',
  data() {
    return {
      value: 'hello world'
    }
  },
  components: {
    MySlot
  }
}
</script>

// 子組件MySlot
<template>
    <div>
        <slot name='mySlot' :childValue='childValue' :one='one'></slot>
    </div>
</template>

<script>
export default {
    name: 'MySlot',
    data() {
        return {
            childValue: 'It is child value',
            one: 'one'
        }
    }
}
</script>
複製代碼

後話

vue@2.6.0版本廢棄了slot、slot-scope，都推薦使用v-slot，具體能夠前往cn.vuejs.org/v2/api/?#sl…查看更多詳細內容。