作用域插槽slot-scope

        一般用于组件封装,将使用props传入组件的数据再次调出来或者单纯调用组件中的数据。也可用于为组件某个部分自定义样式以及为某次使用组件自定义样式。
        直接拿elementui的el-table举例:

<template>
    <el-table v-loading="loading" :data="form" @selection-change="handleSelectionChange" id="outTable" v-show="false">
        <el-table-column label="日期" align="center" prop="xmccbgrq" width="180">
          <template slot-scope="scope">
            <span>{{}}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目状态" align="center" prop="xmzt" :formatter="xmztFormat" />
    </el-table>
</template>


<script>
export default {
    data(){
        return{
            isOpen:[
                {
                    name:'关',
                    data:0 
                },
                {
                    name:'关',
                    data:1 
                }
            ].
            form:[
            

            ]
        }
    }
}
</script>

        可以看到子组件中使用了template标签,还能拿到参数。

        自己封装方法如下(用的vue3,vue2的话v-slot:default=""改成slot-scope然后3和2语法换一换就行了):

        子组件:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="我是传递的值">
    <template v-slot:default="scope">
      <div style="font-size: 50px;color: pink">
        {{scope.rows}}
      </div>
    </template>
  </HelloWorld>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

        父组件:

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
      <slot :rows="msg"></slot>
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

        效果:

        这里只是基础用法,具体封装传递参数还要根据需求来。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/131932.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

55. 右旋字符串(第八期模拟笔试)

55. 右旋字符串&#xff08;第八期模拟笔试&#xff09; 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;错误经验吸取 原题链接&#xff1a; 55. 右旋字符串&#xff08;第八期模拟笔试&#xff09; https://kamacoder.com/problempage…

spring6-国际化:i18n | 数据校验:Validation

文章目录 1、国际化&#xff1a;i18n1.1、i18n概述1.2、Java国际化1.3、Spring6国际化1.3.1、MessageSource接口1.3.2、使用Spring6国际化 2、数据校验&#xff1a;Validation2.1、Spring Validation概述2.2、实验一&#xff1a;通过Validator接口实现2.3、实验二&#xff1a;B…

伦敦金冬令时开市时间怎样调整

在刚刚过去的一周&#xff0c;欧美的金融市场已经正式进入了冬令时&#xff0c;这对伦敦金市场的交易时间也产生了影响。由于美国于今年11月5日(星期日&#xff09;开始正式实施冬令时间&#xff0c;所以香港的伦敦金平台的交易时间也随之而有所调整。 从今年11月6日开始&#…

体力属性在重生奇迹MU中的演变史

我相信&#xff0c;在任何一个网络游戏中都有体力这种属性&#xff0c;它本身就是血量的另一种表达&#xff0c;先天体力有优势的职业&#xff0c;往往就是后期成长较高&#xff0c;这已经是网游中一种常态&#xff0c;因为高血在PK中占据优势&#xff01;重生奇迹MU同样如此&a…

FiRa标准——MAC实现(二)

在IEEE 802.15.4z标准中&#xff0c;最关键的就是引入了STS&#xff08;加扰时间戳序列&#xff09;&#xff0c;实现了安全测距&#xff0c;大大提高了测距应用的安全性能。在FiRa的实现中&#xff0c;其密钥派生功能是非常重要的一个部分&#xff0c;本文首先对FiRa MAC中加密…

Haproxy实现七层负载均衡

目录 Haproxy概述 haproxy算法&#xff1a; Haproxy实现七层负载 ①部署nginx-server测试页面 ②(主/备)部署负载均衡器 ③部署keepalived高可用 ④增加对haproxy健康检查 ⑤测试 Haproxy概述 haproxy---主要是做负载均衡的7层&#xff0c;也可以做4层负载均衡 apache也可…

光刻掩膜版怎么制作的?

光掩膜版基本上是 IC 设计的“主模板”。掩模版有不同的尺寸。常见尺寸为 6 x 6 英寸一般的掩膜版由石英或玻璃基板组成。光掩膜版涂有不透明薄膜。更复杂的掩模版使用其他材料。 一般来说&#xff0c;术语“photo mask”用于描述与 1X 步进机或光刻系统一起使用的“主模板”。…

Xmind常用快捷键

Xmind 是什么&#xff1f; Xmind 是一款全功能的思维导图和头脑风暴软件。像大脑的瑞士军刀一般&#xff0c;助你理清思路&#xff0c;捕捉创意。 全功能&#xff1a;提供9种专业的的思维导图结构&#xff0c;丰富的模板和配色&#xff0c;精美的贴纸和插画&#xff0c;还有演…

ansible-第二天

ansible 第二天 以上学习了ping、command、shell、script模块&#xff0c;但一般不建议使用以上三个&#xff0c;因为这三个模块没有幂等性。举例如下&#xff1a; [rootcontrol ansible]# ansible test -a "mkdir /tmp/1234"[WARNING]: Consider using the file …

RabbitMQ 之 Work Queues 工作队列

目录 一、轮训分发消息 1、抽取工具类 2、启动两个工作线程 3、生产者代码 4、结果展示 二、消息应答 1、概念 2、自动应答 3、消息应答的方法 4、Multiple 的解释 5、消息自动重新入队 6、消息手动应答代码 &#xff08;1&#xff09;生产者 &#xff08;2&#…

上拉电阻与下拉电阻

文章目录 上拉电阻下拉电阻上下拉电阻作用1、稳定信号2、减少电磁干扰3、提高驱动能力 大家在玩单片机的过程中&#xff0c;一定没少听过上拉电阻和下拉电阻这组名词&#xff0c;那么到底什么是上拉电阻和下拉电阻呢&#xff1f;今天我们一起来简单了解一下 上拉电阻 上拉电阻…

企业如何解决被“薅羊毛”

随着互联网的普及和电子商务的兴起&#xff0c;越来越多的消费者选择在线购物。然而&#xff0c;一些消费者可能会利用企业的促销活动或优惠券来获取额外优惠&#xff0c;甚至恶意攻击企业的营销资金。这种行为被形象地称为“薅羊毛”。 对于企业而言&#xff0c;如何解决被“薅…

信通院发布的 “信息系统稳定性保障能力建设指南” 有点干货

刚刚看了信息系统稳定性实验室、中国信息通信研究院云计算与大数据研究所联合发布的 信息系统稳定性保障能力建设指南&#xff0c;感觉还是有点干货的。 节选如下&#xff1a; 概括的比较全 关键指标 行业案例 免费在线阅读和下载地址&#xff1a;信息系统稳定性保障能力建设指…

【Python小练手】使用PySimpleGUI和Pygame创作一个MP3播放器(附完整代码)

文章目录 前言一、来说说思路&#xff08;文心一言提供&#xff09;二、完整代码&#xff08;参考文心&#xff0c;自行修改&#xff09;总结附录 前言 闲来无事&#xff0c;做了MP3播放器练练手&#xff0c;主要是研究下PySimpleGUI的界面窗口设计。先上图&#xff0c;一睹为…

Leetcode刷题详解——电话号码的字母组合

1. 题目链接&#xff1a;17. 电话号码的字母组合 2. 题目描述&#xff1a; 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。…

对于线程的收尾

一)对于synchronized的锁策略: synchronzed是一个自适应的锁&#xff0c;应该根据具体情况来决定选取那种锁策略&#xff1b; 1)synchronized既是一个乐观锁又是一个悲观锁&#xff0c;一开始是一个乐观锁&#xff0c;但是如果发现锁冲突的概率比较高&#xff0c;就会自动转化成…

操作系统实验二、进程和线程管理(Windows 2学时)单线程创建(有详细代码解释和运行步骤)

实验二、进程和线程管理(Windows 2学时) 一、实验目的 通过实验使学生进一步了解进程、进程状态、进程控制等基本概念。基本能达到下列具体的目标: 理解进程 PCB 的概念,以及 PCB 如何实现、如何组织以及管理。加深对进程和线程概念的理解,进一步认识并发执行的本质。掌握…

登录注册代码模板(Vue3+SpringBoot)[邮箱发送验证码(HTML)、RSA 加密解密(支持长文本)、黑暗与亮色主题切换、AOP信息校验]

文章归档&#xff1a;https://www.yuque.com/u27599042/coding_star/cx5ptule64utcr9e 仓库地址 https://gitee.com/tongchaowei/login-register-template 网页效果展示 相关说明 在该代码模板中&#xff0c;实现了如下功能&#xff1a; 邮箱发送验证码&#xff08;邮件内容…

FL Studio 21.2.0.3842中文破解版2024最新系统要求

FL Studio 21.2.0.3842中文版完整下载是最好的音乐开发和制作软件也称为水果循环。它是最受欢迎的工作室&#xff0c;因为它包含了一个主要的听觉工作场所。2024最新fl studioFL Studio 21版有不同的功能&#xff0c;如它包含图形和音乐音序器&#xff0c;帮助您使完美的配乐在…

基于subversion1.6.3动态库实现简单版本管理

基于subversion1.6.3动态库实现简单版本管理 一、运行环境 windows10 64位系统 VS2015、C Subversion1.6.3 二、功能设计与实现 1、需求背景 编码自动化版本部署、发布验证&#xff1b; svn cli命令行能满足基本功能&#xff0c;但是动作执行是否成功的判断不可靠&#…