Vue中使用插槽

插槽的作用是，让父组件可以向子组件指定位置插入html结构。

下面会依次介绍：

1. 默认插槽
2. 具名插槽
3. 作用域插槽。数据在组件本身，但根据数据生成的结构需要组件的使用者决定。

不使用插槽

看具体项目吧。

• 组件Category.vue

<template>
  <div class="category">
      <h3>{{title}}分类</h3>
        <ul>
            <li v-for="(item,index) in listData" :key="index">{{item}}</li>
        </ul>
  </div>
</template>

<script>
export default {
    name:"Category",
    props:["listData","title"]
}
</script>

<style>
.category{
    background: skyblue;
    width: 200px;
    height: 300px;
}
.category h3{
    background: orange;
    text-align: center;
}
</style>

• 组件App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods"/>
    <Category title="游戏" :listData="games"/>
    <Category title="电影" :listData="films"/>
  </div>
</template>

<script>
import Category from './components/Category.vue'

export default {
  name: 'App',
  data(){
    return {
      foods:["火锅","烧烤","湘菜","杭帮菜"],
      games:["王者荣耀","魔兽世界","原神","魂斗罗"],
      films:["穿条纹睡衣的男孩","祈祷落幕时","哈利波特","金刚狼"]
    }
  },
  components: {
    Category
  }
}
</script>

<style>
.container{
  display: flex;
  justify-content: space-around;
}
</style>

• 入口文件main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• 启动应用，测试效果。
  

默认插槽

看具体项目吧。

• 组件Category.vue

<template>
  <div class="category">
      <h3>{{title}}分类</h3>
      <slot>我是默认值，当使用者没有传入具体结构时，我将出现</slot>
  </div>
</template>

<script>
export default {
    name:"Category",
    props:["title"]
}
</script>

<style>
.category{
    background: skyblue;
    width: 200px;
    height: 300px;
}
.category h3{
    background: orange;
    text-align: center;
}
</style>

• 组件App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img src="./assets/images/火锅.jpg" alt="火锅">
    </Category>
    <Category title="游戏">
        <ul>
          <li v-for="(game,index) in games" :key="index">{{game}}</li>
        </ul>
    </Category>
    <Category title="电影">
      <video src="./assets/videos/穿条纹睡衣的男孩预告片.mp4" controls></video>
    </Category>
    <Category title="默认"></Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'

export default {
  name: 'App',
  data(){
    return {
      games:["王者荣耀","魔兽世界","原神","魂斗罗"]
    }
  },
  components: {
    Category
  }
}
</script>

<style>
.container{
  display: flex;
  justify-content: space-around;
}
.container img{
  width: 100%;
}
.container video{
  width: 100%;
}
</style>

• 入口文件main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• 启动应用，测试效果。
  
  

具名插槽

• 组件Category.vue

<template>
  <div class="category">
      <h3>{{title}}分类</h3>
      <slot name="center"></slot>
      <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
    name:"Category",
    props:["title"]
}
</script>

<style>
.category{
    background: skyblue;
    width: 200px;
    height: 300px;
}
.category h3{
    background: orange;
    text-align: center;
}
</style>

• 组件App.vue

<template>
  <div class="container">
    <Category title="美食">
      <img  slot="center" src="./assets/images/火锅.jpg" alt="火锅">
      <a slot="footer" href="http://www.baidu.com" >更多美食</a>
    </Category>
    <Category title="游戏">
        <ul slot="center">
          <li v-for="(game,index) in games" :key="index">{{game}}</li>
        </ul>
        <div slot="footer" class="box">
          <a href="http://www.huawei.com">单机游戏</a>
          <a href="http://www.tencent.com">网络游戏</a>
        </div>
    </Category>
    <Category title="电影">
      <video slot="center" src="./assets/videos/穿条纹睡衣的男孩预告片.mp4" controls></video>
      <!-- <template slot="footer">
        <a href="https://www.bytedance.com/">更多电影</a>
        <h4><a href="https://movie.douban.com/">点击进入观影</a></h4>
      </template> -->
      <!-- <template v-slot:footer>
        <a href="https://www.bytedance.com/">更多电影</a>
        <h4><a href="https://movie.douban.com/">点击进入观影</a></h4>
      </template> -->
      <template #footer>
        <a href="https://www.bytedance.com/">更多电影</a>
        <h4><a href="https://movie.douban.com/">点击进入观影</a></h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'

export default {
  name: 'App',
  data(){
    return {
      games:["王者荣耀","魔兽世界","原神","魂斗罗"]
    }
  },
  components: {
    Category
  }
}
</script>

<style>
.container{
  display: flex;
  justify-content: space-around;
}
.container img{
  width: 100%;
}
.container video{
  width: 100%;
}
.container .box{
  display: flex;
  justify-content: space-around;
}
.container h4{
  text-align: center;
}
</style>

• 入口文件main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• 启动应用，测试效果
  
  

作用域插槽

数据在组件本身，但根据数据生成的结构由组件的使用者决定。
本例中，数据games在Category.vue中，但根据games生成ul、ol还是h4结构，由组件的使用者App.vue决定。

• 组件Category.vue

<template>
  <div class="category">
      <h3>{{title}}分类</h3>
      <slot :games="games">我是默认值，当使用者没有传递具体结构时，我将出现</slot>
  </div>
</template>

<script>
export default {
    name:"Category",
    props:["title"],
    data(){
        return {
            games:["王者荣耀","魔兽世界","原神","魂斗罗"]
        }
    }
}
</script>

<style>
.category{
    background: skyblue;
    width: 200px;
    height: 300px;
}
.category h3{
    background: orange;
    text-align: center;
}
</style>

• 组件App.vue

<template>
  <div class="container">
    <Category title="游戏">
      <template slot-scope="dataObj">
        <ul>
          <li v-for="(game,index) in dataObj.games" :key="index">
            {{game}}
          </li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
      <template slot-scope="{games}">
        <ol>
          <li v-for="(game,index) in games" :key="index">
            {{game}}
          </li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template slot-scope="{games}">
        <h4 v-for="(game,index) in games" :key="index">
          {{game}}
        </h4>      
      </template>
    </Category>
  </div>
</template>


<script>
import Category from './components/Category.vue'

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

<style>
.container{
  display: flex;
  justify-content: space-around;
}

.container h4{
  text-align: center;
}
</style>

• 入口文件main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

• 重启应用，测试效果
  
  

关于插槽，【vue】slot也曾介绍过。