Vue3中的常见组件通信之插槽

Vue3中的常见组件通信之插槽

概述

​ 在vue3中常见的组件通信有props、mitt、v-model、 r e f s 、 refs、 refsparent、provide、inject、pinia、slot等。不同的组件关系用不同的传递方式。常见的撘配形式如下表所示。

组件关系传递方式
父传子1. props
2. v-model
3. $refs
4. 默认插槽、具名插槽
子传父1. props
2. 自定义事件
3. v-model
4. $parent
5. 作用域插槽
祖传孙、孙传祖1. $attrs
2. provide、inject
兄弟间、任意组件间1. mitt
2. pinia

props和自定义事件详见:
Vue3中的常见组件通信之props和自定义事件

mitt用法详见:
Vue3中的常见组件通信之mitt

v-model用法详见:
Vue3中的常见组件通信之v-model

$attrs用法详见:
Vue3中的常见组件通信之$attrs

$refs$parent详见:
Vue3中的常见组件通信之$refs$parent

provide和inject详见:
Vue3中的常见组件通信之provide和inject

pinia详见
Vue3中的常见组件通信之pinia

接下来是插槽。

9. 插槽

插槽分为三种:默认插槽,具名插槽,作用域插槽。

9.1默认插槽

先准备两个组件,一个父组件,一个是子组件Category组件,父组件中的代码如下:

<template>
  <div class="father">
    <div class="content">
      <!-- 组件可以复用 -->
      <Category title="热门游戏列表"/>       
      <Category title="今日美食推荐"/>       
      <Category title="今日影视推荐"/>  
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import Category from './Category.vue'
import {ref,reactive } from 'vue'
//游戏列表数据
let games = reactive([
  {id:"afsdf01",name:"王者荣耀"},
  {id:"afsdf02",name:"和平精英"},
  {id:"afsdf03",name:"我的世界"},
  {id:"afsdf04",name:"原神"}
])
//图片url
let imgUrl = ref('https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161328882.gif')
//电影url
let movieUrl = ref('https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161519334.mp4')
</script>

<style scoped>
  .father{
    width: 800px;
    height: 400px;
    background-image: url(https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161029992.gif);
    background-size: cover;
    padding: 20px;   
  }
  .content{
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
  }
</style>

子组件Category中的代码如下:

<template>
    <div class="category">
        <h2>{{title}}</h2>
    </div>
</template>

<script setup lang="ts" name="Category">
    //接收props
    defineProps(['title'])
</script>

<style scoped>
    .category{
        height: 300px;
        width: 200px;
        padding: 10px;
        background-color:rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        border: 1px solid white;
        box-shadow: 0 0 5px white;
        color: #fff;
        transition: 
            box-shadow 0.3s,
            transform 0.5s;
    }
    .category:hover{
        box-shadow: 0 0 10px white;
        box-shadow: 0 0 20px white;
        transform:translateY(-5px)
    }
    h2{
        text-align: center;
        border-bottom: 1px solid white;
        font-size: 18px;
        font-weight: 800;
    }
</style>

以上代码是把子组件复用三次,并利用props传递title属性,然后在子组件中接收props并在页面呈现,本次写一些CSS样式,效果如下:

接下来需要把父组件中的游戏列表、图片、视频分别呈现在子组件中。

首先要在子组件中写slot标签用来站位,标签中夹着的内容为默认内容,如果父组件没有传递内容,则会显示默认内容,如果父组件传递内容,则显示传递的内容。如下代码:

<slot>这是默认内容</slot>

此时页面呈现效果如下:

image-20240616160443898

在父组件中首先要把组件标签由单标签改成双标签,如下代码:

<div class="content">
    <!-- 组件可以复用 -->
    <Category title="热门游戏列表"></Category>
    <Category title="今日美食推荐"></Category>
    <Category title="今日影视推荐"></Category>
</div>

然后在两个标签中添加页面元素,添加的内容便会呈现在子组件插槽的位置,如下代码:

<div class="content">
    <!-- 组件可以复用 -->
    <Category title="热门游戏列表">
        <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
    </Category>
    <Category title="今日美食推荐">
        <div class="slot">
            <img :src="imgUrl" alt="">
        </div>
    </Category>
    <Category title="今日影视推荐">
        <div class="slot">
            <video :src="movieUrl" controls></video>
        </div>
    </Category>
</div>

再给一些样式:

.slot{
    height: 240px;
    width: 180px;
    opacity:0.2;
    transition:opacity 0.3s
}
.slot:hover{
    opacity:1
} 
img,video{
    text-align: center;
    width: 100%;
}

最终页面呈现的效果如下:

以上便是默认插槽的用法。

以下是完整代码:
父组件

<template>
  <div class="father">
    <div class="content">
      <!-- 组件可以复用 -->
      <Category title="热门游戏列表">
        <ul>
          <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
      </Category>
      <Category title="今日美食推荐">
        <div class="slot">
          <img :src="imgUrl" alt="">
        </div>
      </Category>
      <Category title="今日影视推荐">
        <div class="slot">
          <video :src="movieUrl" controls></video>
        </div>
      </Category>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import Category from './Category.vue'
import {ref,reactive } from 'vue'
//游戏列表数据
let games = reactive([
  {id:"afsdf01",name:"王者荣耀"},
  {id:"afsdf02",name:"和平精英"},
  {id:"afsdf03",name:"我的世界"},
  {id:"afsdf04",name:"原神"}
])
//图片url
let imgUrl = ref('https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161328882.gif')
//电影url
let movieUrl = ref('https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161519334.mp4')
</script>

<style scoped>
  .father{
    width: 800px;
    height: 400px;
    background-image: url(https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161029992.gif);
    background-size: cover;
    padding: 20px;   
  }
  .content{
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
  } 
  .slot{
    height: 240px;
    width: 180px;
    opacity:0.2;
    transition:opacity 0.3s
  }
  .slot:hover{
    opacity:1
  } 
  img,video{
    text-align: center;
    width: 100%;
  }
</style>

子组件

<template>
    <div class="category">
        <h2>{{title}}</h2>
        <!-- 插槽 -->
        <slot>这是默认内容</slot>
    </div>
</template>

<script setup lang="ts" name="Category">
    //接收props
    defineProps(['title'])
</script>

<style scoped>
    .category{
        height: 300px;
        width: 200px;
        padding: 10px;
        background-color:rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        border: 1px solid white;
        box-shadow: 0 0 5px white;
        color: #ffffff;
        transition: 
            box-shadow 0.3s,
            transform 0.5s;
    }
    .category:hover{
        box-shadow: 0 0 10px white;
        box-shadow: 0 0 20px white;
        transform:translateY(-5px)
    }
    h2{
        text-align: center;
        border-bottom: 1px solid white;
        font-size: 18px;
        font-weight: 800;
    }
</style>

9.2 具名插槽

具名插槽顾名思义就是具有名称的插槽,在前一小节中我们在使用插槽的时候没有指定名称,为默认插槽。

使用具名插槽可以使用多个插槽,前面小节中的title数据是用props传递的,有了具名插槽就可以不使用props,全采用插槽传递。子组件中代码改成如下:

<template>
    <div class="category">
        <!-- 插槽1 -->
        <slot name="title">这是默认内容</slot>
        <!-- 插槽2 -->
        <slot name="content">这是默认内容</slot>
    </div>
</template>

父组件中需要传递的数据要用template标签包一下,并添加v-slot属性。如下代码示意:

<template>
  <div class="father">
    <div class="content">
      <!-- 组件可以复用 -->
      <Category>
        <!-- v-slot后面是冒号,冒号后面对应插槽名称 -->
        <template v-slot:title>
          <h2>热门游戏列表</h2>
        </template>

        <template v-slot:content>
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
        </template>
      </Category>

      <Category>
        <template v-slot:title>
          <h2>今日美食推荐</h2>
        </template>

        <template v-slot:content>
          <div class="slot">
          <img :src="imgUrl" alt="">
        </div>
        </template>
      </Category>

      <Category title="今日影视推荐">
        <template v-slot:title>
          <h2>今日影视推荐</h2>
        </template>

        <template v-slot:content>
          <div class="slot">
          <video :src="movieUrl" controls></video>
           </div>
        </template>
      </Category>
    </div>
  </div>
</template>

注意由于不用props传递数据,子组件中需要删除defineProps代码,并且由于h2标签由原来的在子组件中挪到了父组件代码中了,所以CSS样式也要同时粘贴过去。

注意,v-slot:有个小的语法糖,可以简写为#。

以上便是具名插槽的用法,完整代码如下:

父组件

<template>
  <div class="father">
    <div class="content">
      <!-- 组件可以复用 -->
      <Category>
        <!-- v-slot后面是冒号,冒号后面对应插槽名称 -->
        <template v-slot:title>
          <h2>热门游戏列表</h2>
        </template>

        <template v-slot:content>
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
        </template>
      </Category>

      <Category>
        <!-- v-slot:可以简写为# -->
        <template #title>
          <h2>今日美食推荐</h2>
        </template>

        <template #content>
          <div class="slot">
          <img :src="imgUrl" alt="">
        </div>
        </template>
      </Category>

      <Category>
        <template #title>
          <h2>今日影视推荐</h2>
        </template>

        <template #content>
          <div class="slot">
          <video :src="movieUrl" controls></video>
           </div>
        </template>
      </Category>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import Category from './Category.vue'
import {ref,reactive } from 'vue'
//游戏列表数据
let games = reactive([
  {id:"afsdf01",name:"王者荣耀"},
  {id:"afsdf02",name:"和平精英"},
  {id:"afsdf03",name:"我的世界"},
  {id:"afsdf04",name:"原神"}
])
//图片url
let imgUrl = ref('https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161328882.gif')
//电影url
let movieUrl = ref('https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161519334.mp4')
</script>

<style scoped>
  .father{
    width: 800px;
    height: 400px;
    background-image: url(https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161029992.gif);
    background-size: cover;
    padding: 20px;   
  }
  .content{
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
  } 
  .slot{
    height: 240px;
    width: 180px;
    opacity:0.2;
    transition:opacity 0.3s
  }
  .slot:hover{
    opacity:1
  } 
  img,video{
    text-align: center;
    width: 100%;
  }
  h2{
        text-align: center;
        border-bottom: 1px solid white;
        font-size: 18px;
        font-weight: 800;
    }
</style>

子组件

<template>
    <div class="category">
        <!-- 插槽1 -->
        <slot name="title">这是默认内容</slot>
        <!-- 插槽2 -->
        <slot name="content">这是默认内容</slot>
    </div>
</template>

<script setup lang="ts" name="Category">

</script>

<style scoped>
    .category{
        height: 300px;
        width: 200px;
        padding: 10px;
        background-color:rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        border: 1px solid white;
        box-shadow: 0 0 5px white;
        color: #ffffff;
        transition: 
            box-shadow 0.3s,
            transform 0.5s;
    }
    .category:hover{
        box-shadow: 0 0 10px white;
        box-shadow: 0 0 20px white;
        transform:translateY(-5px)
    }

</style>

9.3 作用域插槽

作用域插槽与前面的默认插槽和具名插槽有很大的不同,默认插槽和具名插槽都是用于父传子,数据在父组件中。作用域插槽用于子传父,数据在子组件中,但是数据生成的结构由父组件决定。

如下代码在子组件中定义游戏列表数据,但是数据的呈现方式在组件中可以是无序列表,也可以是有序列表,也可以是普通文本。

如下代码是子组件的数据:

<script setup lang="ts" name="Games">
import {reactive } from 'vue'
//游戏列表数据
let games = reactive([
  {id:"afsdf01",name:"王者荣耀"},
  {id:"afsdf02",name:"和平精英"},
  {id:"afsdf03",name:"我的世界"},
  {id:"afsdf04",name:"原神"}
])
</script>

使用slot标签来传递数据,此处用法与props用法相同,也可以同时传递多个数据。

<template>
    <div class="games">
        <h2>游戏列表</h2>
        <!-- 给slot组件传递props -->
        <slot :games="games"></slot>
    </div>
</template>

在父组件中接收数据用v-slot=“XXX”接收数据,接收的数据是一个对象。

<Games>
    <!-- v-slot=""用来接收props -->
    <template v-slot="params">
		<ul>
    		<li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
        </ul>
    </template>
</Games>

作用域插槽也可以用带有名称,如果插槽没有命名,默认的名字为default,包括前面小节的默认插槽,它的名字也是default。

<Games>
    <!-- default为插槽的名称,未命名的插槽默认名称是default -->
    <template v-slot:default="params">
		<ol>
    		<li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
        </ol>
    </template>
</Games>

v-slot:也可以用简写的形式,

<Games>
    <!-- #是 v-slot: 的语法糖-->
    <template #default="params">
		<h4 v-for="g in params.games" :key="g.id">{{ g.name }}</h4>
    </template>
</Games>

在接收数据的时候也可以解构赋值,如下:

<Games>
    <!-- 在接收的时候进行了解构赋值-->
    <template #default="{games}">
		<h5 v-for="g in games" :key="g.id">{{ g.name }}</h5>
    </template>
</Games>

最终呈现的效果如下:

完整代码如下:

父组件

<template>
  <div class="father">
    <div class="content">
      <Games>
        <!-- v-slot=""用来接收props -->
        <template v-slot="params">
          <ul>
            <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
          </ul>
        </template>
      </Games>
      <Games>
        <!-- default为插槽的名称,未命名的插槽默认名称是default -->
        <template v-slot:default="params">
          <ol>
            <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
          </ol>
        </template>
      </Games>
      <Games>
        <!-- #是 v-slot: 的语法糖-->
        <template #default="params">
            <h4 v-for="g in params.games" :key="g.id">{{ g.name }}</h4>
        </template>
      </Games>
      <Games>
        <!-- 在接收的时候进行了解构赋值-->
        <template #default="{games}">
            <h5 v-for="g in games" :key="g.id">{{ g.name }}</h5>
        </template>
      </Games>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import Games from './Games.vue';

</script>

<style scoped>
  .father{
    width: 800px;
    height: 400px;
    background-image: url(https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406161029992.gif);
    background-size: cover;
    padding: 20px;   
  }
  .content{
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
  } 
</style>

子组件

<template>
    <div class="games">
        <h2>游戏列表</h2>
        <!-- 给slot组件传递props -->
        <slot :games="games"></slot>
    </div>
</template>

<script setup lang="ts" name="Games">
import {reactive } from 'vue'
//游戏列表数据
let games = reactive([
  {id:"afsdf01",name:"王者荣耀"},
  {id:"afsdf02",name:"和平精英"},
  {id:"afsdf03",name:"我的世界"},
  {id:"afsdf04",name:"原神"}
])
</script>

<style scoped>
.games{
    height: 300px;
    width: 180px;
    padding: 10px;
    background-color:rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    border: 1px solid white;
    box-shadow: 0 0 5px white;
    color: #fff;
    transition: 
        box-shadow 0.3s,
        transform 0.5s;
}
.games:hover{
    box-shadow: 0 0 10px white;
    box-shadow: 0 0 20px white;
    transform:translateY(-5px)
}
h2{
    text-align: center;
    border-bottom: 1px solid white;
    font-size: 18px;
    font-weight: 800;
}
</style>
  • 27
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值