在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的 attribute。以此為背景。vue2.6.0

插槽內(nèi)容

// 定義組件  slotDemo1.vue
<template>
  <div>
    哈爾的移動城堡
    <slot></slot>
  </div>
</template>

// 引入組件
import slotDemo from './components/slotDemo1.vue'
components: {
  slotDemo
}

<template>
  <div id="app">
    <div>宮崎駿的漫畫</div>
    <slot-demo></slot-demo>
  </div>
</template>

image.png

<template>
  <div id="app">
    <div>宮崎駿的漫畫</div>
    <slot-demo>
      <section style="color:lightseagreen;">千與千尋</section>
    </slot-demo>
  </div>
</template>

image.png

不難看出，slot插槽的使用允許用戶自由定義元素、文字、樣式

具名插槽

// 定義組件 slotDemo2.vue
<template>
  <div>
    <div>頭部：</div>
    <slot name="header"></slot>
    <div>身體：</div>
    <slot name="body"></slot>
    <div>美足：</div>
    <slot name="footer"></slot>
  </div>
</template>

// 引入組件
import slotDemo from './components/slotDemo2.vue'
components: {
  slotDemo
}
<template>
  <div id="app">
    <div>格林童話-白雪公主的描述</div>
    <slot-demo>
      <template v-slot:header>
        <div>烏黑亮麗的頭發(fā)</div>
      </template>
      <template v-slot:body>
        <div>白皙光滑的皮膚</div>
      </template>
      <template v-slot:footer>
        <div>小巧玲瓏的小腳</div>
      </template>
    </slot-demo>
  </div>
</template>

image.png

這里定義了三個插槽，分別名稱為header、body、footer。使用時候，對應(yīng)插入內(nèi)容。

作用域插槽

// 定義組件 slotDemo3.vue
<template>
  <div>
    <div>{{flower.name}}</div>
    <slot v-bind:flower="flower"></slot>
  </div>
</template>

<script>
export default {
  name: "slotDemo3",
  data() {
    return {
      flower:{
        name:'向日葵',
        color:'黃色的',
        remark:'一直追隨太陽，如同我追隨vue'
      }
    }
  }
}
</script>

<template>
  <div id="app">
    <div style="margin-bottom:12px;">我喜歡的花：</div>
    <slot-demo>
      <template v-slot:default="slotScope">
        <div>顏色：{{slotScope.flower.color}}</div>
        <div>花語：{{slotScope.flower.remark}}</div>
      </template>
    </slot-demo>
  </div>
</template>

<script>
import slotDemo from './components/slotDemo3.vue'

export default {
  name: 'App',
  components: {
    slotDemo
  }
}
</script>

image.png

// el-table
<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">編輯</el-button>
    <el-button @click="handleDelte(scope.row)" icon="el-icon-delete" size="mini">刪除</el-button>
  </template>
</el-table-column>

官網(wǎng)的一句話，作為一條規(guī)則，請記住

父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。

具名作用域插槽

// 定義 slotDemo4.vue
<template>
  <div>
    <slot name="gril" v-bind:user="user"></slot>
  </div>
</template>

<script>
export default {
  name: "slotDemo4",
  data() {
    return {
      user:{
        name:'mavis',
        age:22
      }
    }
  }
}
</script>

<template>
  <div id="app">
    <div style="margin-bottom:12px;">我</div>
    <slot-demo>
      <template v-slot:gril="slotScope">
        <div>姓名：{{slotScope.user.name}}</div>
        <div>年齡：{{slotScope.user.age}}</div>
      </template>
    </slot-demo>
  </div>
</template>
<script>
import slotDemo from './components/slotDemo4.vue'

export default {
  name: 'App',
  components: {
    slotDemo
  }
}
</script>

定義了具名： v-slot:gril="slotScope" ；如果沒有定義具名，系統(tǒng)默認(rèn)default，語法：v-slot:default="slotScope"