首页 > 其他分享 >组件间通信--插槽

组件间通信--插槽

时间:2024-10-10 15:14:37浏览次数:9  
标签:slot title -- 插槽 具名 间通信 作用域 组件

插槽(slot)可以实现父与子组件间通信,即想让父组件在指定位置插入一些信息。

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

默认插槽

子组件代码:

   <h1>我是子组件默认插槽--父组件中子组件标签中的数据会放入slot中</h1>
   <!-- 默认插槽 -->
   <slot></slot>

父组件代码:

    <Test>
        <div>
          <pre>大即将到期浪淘尽,千古分流人物,还看今朝,好好学习,厚积薄发</pre>
        </div>
    </Test>

 具名插槽

子组件中,slot增加name属性

<h1>具名插槽填充数据</h1>
   <slot name="a"></slot>
   <slot name="b"></slot>

 父组件中,使用template标签指定具体的v-slot来表示插槽位置

        <template v-slot:a>
          <div>
              <div>我是往具名插槽a中填充的内容</div>
          </div>
        </template>

        <template v-slot:b>
          <div>
              <div>我是往具名插槽b中填充的内容</div>
          </div>
        </template>

 作用域插槽

指可以传递数据的插槽,子组件可以将数据传回给父组件,父组件决定这些回传数据

另外:以下代码可以学习一下,给style添加动态的属性,如果item.done是false那么color为green,否则color为red

<!-- style  动态表达式 可以学习一下 冒号后面就可以写表达式包括三元运算符 -->
<li
    :style="{color: item.done ? 'green' : 'red'}"
    v-for="(item, index) in todo"
    :key="item.id"
>
    {{ item.title }}
</li>

子组件:

props接收来的参数后,通过$row来返回给父组件

子组件代码:

<h1>作用域插槽</h1>
<ul>
    <li
        v-for="(item, index) in todo"
        :key="item.id"
    >
        <!-- 作用域插槽的特点:可以将数据回传给父组件 -->
        <slot :$row="item"></slot>
    </li>
</ul>

 

 父组件:使用template中的v-slot接收子组件的参数,并重新渲染会子组件

<template>
    <div>
        <h1>slot</h1>
        <Test1 :todo="todo">
            <template v-slot="{ $row}">
                <div>
                    <!-- 下面是子组件回传过来的数据 -->
                    <span :style="{color:$row.done? 'green' : 'red'}"
                        >{{ $row.title }}</span
                    >
                </div>
            </template>
        </Test1>

        <Test>
            <div>
                <pre>
大即将到期浪淘尽,千古分流人物,还看今朝,好好学习,厚积薄发</pre
                >
            </div>
            <template v-slot:a>
                <div>
                    <div>我是往具名插槽a中填充的内容</div>
                </div>
            </template>

            <template v-slot:b>
                <div>
                    <div>我是往具名插槽b中填充的内容</div>
                </div>
            </template>
        </Test>
    </div>
</template>

<script setup lang="ts">
import Test from "./Test.vue";
import Test1 from "./Test1.vue";
// 插槽:默认插槽、具名插槽、作用域插槽
// 作用域插槽:可以传递数据的插槽,子组件可以将数据传回给父组件,父组件决定这些回传数据

import { ref } from "vue";
let todo = ref([
    { id: 1, title: "吃饭", done: true },
    { id: 2, title: "睡觉", done: false },
    { id: 3, title: "打豆豆", done: true },
    { id: 4, title: "编程", done: false },
]);
</script>

<style scoped></style>

 

标签:slot,title,--,插槽,具名,间通信,作用域,组件
From: https://www.cnblogs.com/yansunda/p/18456263

相关文章

  • Rust 与生成式 AI:从语言选择到开发工具的演进
    在现代软件开发领域,Rust语言正在逐步崭露头角,尤其是在高性能和可靠性要求较高的应用场景。与此同时,生成式AI的崛起正在重新塑造开发者的工作方式,从代码生成到智能调试,生成式AI的应用正成为提升开发效率和质量的重要工具。在本文中,我们将详细探讨Rust语言的现状与趋势,并分析......
  • 数据库认证有用吗?证书:职场晋升的有力助推器
    在当今竞争激烈的就业市场中,拥有专业技能和相关证书成为了脱颖而出的关键。数据库证书便是这样一把开启职业成功之门的金钥匙,它对于找工作和升职加薪有着不可忽视的重要作用。一、助力求职,脱颖而出1.增强竞争力随着信息技术的飞速发展,各行各业对数据库管理和分析的需求日益增......
  • 面试题One:在浏览器输入一个URL然后回车,发生了什么?
    浏览器做的第一步就是解析URL得到里面的参数,将域名和需要请求的资源分离开来,从而了解需要请求的是哪个服务器,请求的是服务器上什么资源等等。应用层:浏览器封装HTTP请求报文DNS解析域名获得目标服务器地址传输层:建立连接把应用层传过来的HTTP请求报文进行分割,并在各个报文......
  • 面试Two:性能测试流程
    1.名词解释:TPS(transactionpersecond)是单位时间内处理事务的数量QPS(querypersecond)是单位时间内请求的数量。2.区别:TPS的一次事务代表一次用户操作到服务器返回结果,QPS的一次请求代表一个接口的一次请求到服务器返回结果。3.性能测试流程1.学习业务,了解需求2.需求分析(......
  • 谈JVM xmx, xms等内存相关参数合理性设置
    作者:京东零售刘乐上一篇文章说到JVM垃圾回收算法的两个优化标的:吞吐量和停顿时长,并提到这两个优化目标是有冲突的。那么有没有可能提高吞吐量而不影响停顿时长,甚至缩短停顿时长呢?答案是有可能的,提高内存占用(MemoryFootprint)就有可能同时优化这两个标的,这篇文章就来聊聊内存相关......
  • 谈kafka
    作者:京东科技徐拥导读:当今大数据时代,高吞吐、高可靠成为了分布式系统中重要的指标。而ApacheKafka作为一个高性能、分布式、可扩展的消息队列系统,被越来越多的企业和开发者所关注和使用。在本文中,我们将介绍Kafka的基本概念,包括Kafka的架构、消息的存储和处理方式、Kafka的......
  • 全局视角看技术-Java多线程演进史
    作者:京东科技文涛全文较长共6468字,语言通俗易懂,是一篇具有大纲性质的关于多线程的梳理,作者从历史演进的角度讲了多线程相关知识体系,让你知其然知其所以然。前言2022年09月22日,JDK19发布了,此版本最大的亮点就是支持虚拟线程,从此轻量级线程家族再添一员大将。虚拟线程使JVM摆脱......
  • 2024.10.10 1514版
    起于《海奥华预言》的思考◆地球管理结构和参考持续更新中...... 英文地址:https://github.com/zhuyongzhe/Earth/tags中文地址:https://www.cnblogs.com/zhuyongzhe85作者:朱永哲 ---------------------------------------------------------------------------------......
  • Set 新增的实用方法
    有哪些新的Set方法呢?总共有7个新的方法,分别是:intersection() 计算两个Set的 交集union() 计算两个Set的 并集difference() 计算两个Set的 差集symmetricDifference() 取两个Set的 差集 的 并集isSubsetOf() 判断Set是否是另一个Set的 超集isD......
  • [Javascript] Proxy vs defineProperty in low level
    ProxyThe Proxy objectenablesyoutocreateaproxyforanotherobject,whichcaninterceptandredefinefundamentaloperationsforthatobject. Sowhatdoesitmeanfor fundamentaloperationsforobject?Injavascript,wecandofollowingopeartio......