作用域插槽slot-scope

news2024/12/27 13:43:21

        一般用于组件封装,将使用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>

        效果:

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PDF Expert for mac(专业pdf编辑器)苹果电脑

PDF Expert for Mac 是一款功能强大、界面简洁的PDF阅读、编辑和转换工具&#xff0c;为Mac用户提供了全面而便捷的PDF处理体验。无论是日常工作中的文档阅读、标注&#xff0c;还是专业需求下的编辑、转换&#xff0c;PDF Expert 都能满足您的各种需求。 首先&#xff0c;PDF…

Leetcode-94 二叉树的中序遍历

递归实现 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {* …

RustRover里使用AI通义灵码来写代码

AI通义灵码我选择RustRover里的 plugin进行下载使用 然后我们就提问好了&#xff1a;让他用c语言写一个冒泡排序程序 #include <stdio.h>void bubble_sort(int arr[], int size) {int i, j, temp;for (i 0; i < size - 1; i) {for (j 0; j < size - i - 1; j) {i…

RabbitMQ 之 Work Queues 工作队列

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

【CodeTop】TOP 100 刷题 1-10

文章目录 1. 无重复字符的最长子串题目描述代码与思路 2. 反转链表题目描述代码与解题思路 3. LRU 缓存题目描述代码与解题思路 4. 数组中的第K个最大元素题目描述代码与解题思路 5. K 个一组翻转链表题目描述代码与解题思路 6. 三数之和题目描述代码与解题思路 7. 最大子数组和…

Edge浏览器新建标签页如何更改为指定网址

Edge浏览器新建标签页如何更改为指定网址&#xff1f; 启动时新建标签页 不是说启动时&#xff0c;而是加号新建标签页时候 启动时 新建标签页 New Tab Changer 可以了 如果没有需要应用商店下载 参考文章

Qframework 中超级方便的kitres

using QFramework; using System.Collections; using System.Collections.Generic; using UnityEngine;public class TestResKit : MonoBehaviour {ResLoader mResLoader ResLoader.Allocate();private void Awake(){}/// <summary>/// 每一个需要加载资源的单元(脚本,界…

FiRa标准——MAC实现(二)

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

element-plus 循环生成的多个input输入框如何校验

我们知道正常写出来的input输入框如何校验&#xff0c;那循环出来的输入框应该怎么校验咧&#xff0c;这里就教大家如何的去校验通过循环出来的输入框。 首先先看单个的input如何做校验 <template><div><el-form ref"ruleFormRef" :model"ruleF…

面试题:说一下公司常用MySQL分库分表方案

文章目录 一、数据库瓶颈1、IO瓶颈2、CPU瓶颈 二、分库分表1、水平分库2、水平分表3、垂直分库4、垂直分表 三、分库分表工具四、分库分表步骤五、分库分表问题1、非partition key的查询问题2、非partition key跨库跨表分页查询问题3、扩容问题 六、分库分表总结 一、数据库瓶颈…

使用MVS-GaN HEMT紧凑模型促进基于GaN的射频和高电压电路设计

标题&#xff1a;Facilitation of GaN-Based RF- and HV-Circuit Designs Using MVS-GaN HEMT Compact Model 来源&#xff1a;IEEE TRANSACTIONS ON ELECTRON DEVICES&#xff08;19年&#xff09; 摘要—本文阐述了基于物理的紧凑器件模型在研究器件行为细微差异对电路和系统…

Linux中的粘滞位

目录 粘滞位1、作用2、为什么添加粘滞位3、演示粘滞位的使用方法和效果 粘滞位 1、作用 为了多人协作写进行文件创作时&#xff0c;other用户没有办法将文件删除&#xff0c;只有超级管理员、该目录的所有者、该文件的所有者他们可以删除。 2、为什么添加粘滞位 你想在进行…

rabbitmq延迟队列发送与取消

安装延迟插件 根据rabbitmq的版本下载插件版本 # 延迟队列插件下载地址 https://github.com/rabbitmq/rabbitmq-delayed-message-exchange/releases# 将本地下载好的插件复制到docker里 # docker cp rabbitmq_delayed_message_exchange-3.9.0.ez 容器名:/plugins docker cp r…

数据结构预算法--链表(单链表,双向链表)

1.链表 目录 1.链表 1.1链表的概念及结构 1.2 链表的分类 2.单链表的实现(不带哨兵位&#xff09; 2.1接口函数 2.2函数的实现 3.双向链表的实现&#xff08;带哨兵位&#xff09; 3.1接口函数 3.2函数的实现 1.1链表的概念及结构 概念&#xff1a;链表是一种物理存储结…

基于SSM的学生就业管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

K8S知识点(八)

&#xff08;1&#xff09;实战入门-Label 通过标签实现Pod的区分&#xff0c;说白了就是一种标签选择机制 可以使用命令是否加了标签&#xff1a; 打标签&#xff1a; 更新标签&#xff1a; 筛选标签&#xff1a; 修改配置文件&#xff0c;重新创建一个pod 筛选&#xff1…

手写C++ 实现链表的反转、删除、合并

目录 一、手写List成员方法 1.1 打印链表 1.2 删除链表节点 1.3 链表中倒数第k个节点 1.4 反转链表 1.5 合并两个排序链表 二、完整代码 一、C实现链表成员方法 在上一篇博客《手写链表C》&#xff0c;实现了基本的List类。在面试中&#xff0c;经常被问到List如何反转、…

代码随想录训练营Day2:1.有序数组的平方 2.长度最小的子数组3,螺旋矩阵

本专栏内容为&#xff1a;代码随想录训练营学习专栏&#xff0c;用于记录训练营的学习经验分享与总结。 文档讲解&#xff1a;代码随想录 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓…

基于SSM的超市库存商品管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

dbeaver连接别人的数据库没有表

1.概念 非缺省的数据库&#xff1a; 通常是指在一个数据库管理系统&#xff08;DBMS&#xff09;中&#xff0c;除了系统默认创建的数据库之外的其他用户创建或自定义的数据库。许多数据库系统在安装后会创建一个默认数据库&#xff0c;例如MySQL中的mysql数据库&#xff0c;…