Vue中的插槽怎么使用

这篇“Vue中的插槽怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的插槽怎么使用”文章吧。

默认插槽

首先做一个页面：

新增 CateGory.vue

<template><div class="category">  <h4>{{title}}分类</h4>  <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;}h4{  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">  <h4>{{title}}分类</h4>  <slot></slot></div></template><script>export default {  name: "Category",  props:["title"]}</script><style scoped>.category{  background-color: skyblue;  width: 200px;  height: 300px;}h4{  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">  <h4>{{title}}分类</h4>  <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;}h4{  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">    <h4>{{ title }}分类</h4>    <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;}h4 {  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}">        <h5 v-for="(g,index) in games" :key="index">{{ g }}</h5>        <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>

插槽总结

• 作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件问通信的方式，适用于父组件==>子组件

• 分类：默认插槽、具名插槽、作用域插槽

• 使用方式：

默认插槽

父组件中：

<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>

作用域插槽

• 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，(games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定)

• 具体编码：

父组件中：

<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}>    <!--生成的是h5标题-->    <h5 v-for="g in scopeData" :key="g">{{g}}</h5>    </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中的插槽怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。