vue3 默认插槽、具名插槽、作用域插槽的使用

0. 组件和插槽区别

组件是Vue插槽中最为关键的一个特性之一，而插槽是组件的一大亮点。插槽是为组件服务的，让组件更灵活多用。

1. 默认插槽、具名插槽的通用格式（#myName 是 v-slot:myName的缩写）：建议使用通用格式

<template> 元素中的所有内容都将会被传入相应的插槽。

 <组件名称>
　　<!-- 在template上写样式不起效 -->
    <template #myName>     //#myName 是 v-slot:myName 的缩写，默认插槽可以写 #default
        <p>具体内容1</p>
        <p>具体内容2</p>
        <p>具体内容3</p>
    </template>
<组件名称/>

slot.vue

<div class="box">
  <h4>默认插槽 Header</h4>
　<!-- 在slot上写样式、事件也不生效 -->
  <slot>我是默认插槽的备选内容</slot>
  <h4> 默认插槽footer</h4>
</div>

app.vue 通用格式使用默认插槽

<SlotDemo>
    <template #default>  //不带 name 的 <slot> 出口会带有隐含的名字“default”
        <img src="./assets/logo.png" alt="">
        <p class="slot-red">我是默认插槽内容1 </p>
        <h3 class="slot-red">我是默认插槽内容2</h3>
    </template>
</SlotDemo>

2. 默认插槽也可以省略template标签，直接写具体内容（但不能有template标签却没有v-slot：）

app.vue

<SlotDemo>
    <img src="./assets/logo.png" alt="">
    <p class="slot-red">我是默认插槽内容1 </p>
    <h3 class="slot-red">我是默认插槽内容2</h3>
</SlotDemo>

3. 具名插槽的 v-slot：必须写在 template 上

slot.vue

<div class="box">
  <div>我是头部</div>
  <slot name="myName">我是具名插槽的备选内容</slot>
  <div>我是尾部</div>
</div>

app.vue

<SlotDemo>
    <template #myName>
        <p class="slot-red">我是具名插槽内容1</p>
        <p class="slot-red">我是具名插槽内容2</p>
        <img src="./assets/logo.png" />
    </template>
</SlotDemo>

4. 只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法（通用格式）。

5. 作用域插槽

作用域插槽可以让 app.vue 访问到组件内部data中的数据。

（有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。）

SlotDemo.vue

<!-- 作用域插槽 -->
<!-- user, msg 是data{}中的数据；info，message 是app.vue中解构时的名称 -->
<slot name="zuoyongyu" :info="user" :message="msg"></slot>

 data() {
    return {
      user: {
        name: "Lucy",
        address: "上海市静安区",
        phone: 12345678901,
      },
      msg:"hello world"
    };
  },

App.vue（第一种访问作用域插槽数据的方法：直接接收数据）

<SlotDemo>
    <template #zuoyongyu="scoped">
        <p>{{ scoped }}</p>
    </template>
</SlotDemo>

App.vue（第二种访问作用域插槽数据的方法：解构接收数据）

<SlotDemo>
    <template #zuoyongyu="{info,message}">
        <p>{{info}}</p>
        <p>{{message}}</p>
    </template>
</SlotDemo>

posted @ 2022-04-06 15:55 sunshine233 阅读(1682) 评论(0) 编辑收藏举报

sunshine233