vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 插槽使用

Vue 中插槽的使用总结

作者：Errol_King

这篇文章主要向大家分享的是Vue 中插槽的使用总结，包括内容有默认插槽、具名插槽、作用域插槽等内容，具有一定的参考价值，需要的小伙伴可以参考一下

默认插槽

首先做一个页面：

新增 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:["title","listData"]
}
</script>

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3{
  text-align: center;
  background-color: orange;
}
</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";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火锅","烧烤","小龙虾","牛排"],
      games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
      films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
    }
  }

}
</script>

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

现在修改需求，每个分类都要展示不同的内容：

这里就用到了插槽，修改 Category.vue

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

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

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

修改 App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
    </Category>
    <Category title="游戏" :listData="games">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>
    <Category title="电影">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火锅","烧烤","小龙虾","牛排"],
      games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
      films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
    }
  }

}
</script>

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

具名插槽

修改 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 scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3{
  text-align: center;
  background-color: orange;
}
</style>

修改 App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img slot="center" src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
      <a slot="footer" href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >更多美食</a>
    </Category>
    <Category title="游戏" :listData="games">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >单机游戏</a>
        <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
      <!--v-slot 只有template能用-->
      <template v-slot:footer>
        <div class="foot" slot="footer">
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >经典</a>
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >热门</a>
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >推荐</a>
        </div>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火锅","烧烤","小龙虾","牛排"],
      games:["劲舞团","QQ飞车","超级玛丽","无人深空"],
      films:["《教父》","《狩猎》","《禁闭岛》","《聚焦》"]
    }
  }

}
</script>

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

作用域插槽

如果数据在 Category 中，但需要展示不同的形式，我们可以通过插槽传值，类似于我们从父组件向子组件传值：

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :games="games" :msg="hello"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["劲舞团", "QQ飞车", "超级玛丽", "无人深空"]
    }
  }
}
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h3 {
  text-align: center;
  background-color: orange;
}
</style>

App 中在子组件中使用 <template> 包裹要展示的内容，标签中可以使用scope接收传过来的值

<template>
  <div class="container">
    <Category title="游戏">
      <template v-slot="receiveValue">
        <ul>
          <li v-for="(g,index) in receiveValue.games" :key="index">{{ g }}</li>
        </ul>
        <a>{{ receiveValue.msg }}</a>
      </template>
    </Category>

    <Category title="游戏">
      <template v-slot="{games,msg}">
        <ol>
          <li v-for="(g,index) in games" :key="index">{{ g }}</li>
        </ol>
        <a>{{ msg }}</a>
      </template>
    </Category>

    <Category title="游戏">
      <template v-slot="{games,msg}">
        <h4 v-for="(g,index) in games" :key="index">{{ g }}</h4>
        <a>{{ msg }}</a>
      </template>
    </Category>

  </div>
</template>

<script>
import Category from "@/components/Category";

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

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

img, video {
  width: 100%;
}
</style>

插槽总结

默认插槽

父组件中：

<Category>
    <div>html结构</div>
<Category>

子组件中：

<template>
    <div>
    <!--定义插槽-->
    <slot>插槽默认内容...</slot>
    </div>
</templdte>

具名插槽

父组件中：

<Category>
    <template slot="center">
        <div>html结构1</div>
    </template>
    <tenplate v-slot:footer>
        <div>html结构2</div>
    </template>
</Category>

子组件中：

<template>
    <div>
    <1--定义插槽-->
    <slot name="center">插槽默认内容...</slot>
    <slot name="footer”>插槽默认内容...</slot>
    </div>
</template>

作用域插槽

父组件中：

<category>
    <template v-slot="scopeData"
    <!--生成的是ul列表-->
    <ul>
        <li v-for="g in scopeDsta.games" : key="g">{g}</li>
    </ul>
    </template>
</Category>

<Category>
    <template v-slot={scopeData}>
    <!--生成的是h4标题-->
    <h4 v-for="g in scopeData" :key="g">{{g}}</h4>
    </template>
</Category>

子组件中：

<template>
    <div>
        <slot :games="games"></slot>
    </div>
</template>

<script>
export default{
    name: "Category ',
    props: ["title"],
    //数据在子组件自身
    data() {
        return{
            games:['红色警戒,穿越火线',"劲舞团",超级玛丽"]
        }
    }
}</script>

注意：scope和slot-scope过时了，可以使用v-slot

到此这篇关于Vue 中插槽的使用总结的文章就介绍到这了,更多相关Vue 插槽使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文