杭州有奖举报/优化关键词快速排名

杭州有奖举报,优化关键词快速排名,用nat123做自己的网站,杭州做网站多少钱二次封装 我们开发中经常需要封装一些第三方组件,那么父组件应该怎么传值,怎么调用封装好的组件原有的属性、插槽、方法,一个个调用虽然可行,但十分麻烦,我们一起来看更简便的方法。 二次封装组件,属性怎…

二次封装

我们开发中经常需要封装一些第三方组件,那么父组件应该怎么传值,怎么调用封装好的组件原有的属性、插槽、方法,一个个调用虽然可行,但十分麻烦,我们一起来看更简便的方法。

二次封装组件,属性怎么传

attrs 主要接收不在 props 里定义,但父组件又传过来的属性,通过 v-bind=“$attrs”,可以将属性全部传给封装起来的组件(如下面例子中的 el-input ),而不需要一个一个传

// 父组件
<template><div><MyInput v-model="text" placeholder="请输入地址"></MyInput></div>
</template><script setup>
import MyInput from './components/MyInput.vue';
import { ref } from 'vue';
const text = ref('123');
</script>
// MyInput 组件
<template><div class="item"><el-input v-bind="$attrs"></el-input></div>
</template>
<script setup>
import { onMounted, useAttrs } from 'vue';
const props = defineProps({// placeholder:{//   type:String// }// attrs包含的是不在props中的属性// 如果这里有placeholder,下面输出attrs就不会有这个placeholder
});
const attrs = useAttrs(); // 需要引入 vue 中的 useAttrs ,调用 useAttrs 获取 attrs
onMounted(() => {console.log(attrs); // 输出如下图
})
</script>

在这里插入图片描述

监听事件怎么实现

$listeners :包含了父作用域中(不含 .native 修饰器的)v-on 事件监听器,他可以通过 v-on=“listeners” 传入内部组件,监听内部组件的所有事件.

<template><div><MyInputv-model="text"placeholder="请输入地址"ref="focusRef"@input="inputNum"><template #prepend="{}"><el-select v-model="select" placeholder="Select" style="width: 115px"><el-option label="A" value="1" /><el-option label="B" value="2" /><el-option label="C" value="3" /></el-select></template><template #append><el-button :icon="Search" /></template></MyInput></div>
</template>
<script setup>
import MyInput from "./components/MyInput.vue";
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const text = ref("123");
const select = ref("");
const focusRef = ref();
onMounted(() => {focusRef.value.focus();
});
const inputNum = (val) => { // 被监听事件触发时调用的方法console.log("输出:" + val);
};
</script>// 子组件
<template><div class="item"><el-input v-bind="$attrs" v-on="$listeners" ref="inp"><template v-for="(value, name) in $slots" #[name]="slotData"><slot :name="name" v-bind="slotData || {}"></slot></template></el-input></div>
</template>
<script setup>
import { onMounted, useSlots, useAttrs, nextTick, ref } from "vue";const attrs = useAttrs();
const slots = useSlots();
const inp = ref();
onMounted(() => {console.log(attrs);console.log(slots);console.log(inp.value);
});
defineExpose(new Proxy({},{// 使用 Proxy 代理暴露出去get(_target, prop) {return inp.value?.[prop];},has(_target, prop) {return prop in inp.value;},})
);
</script>

插槽怎么使用

二次封装组件时经常需要往原组件的插槽中传递内容,这时要让原始组件知道我们使用了哪些插槽,可以使用 $slots

$slots 是一个表示父组件所传入[插槽]的对象,我们可以在子组件中通过 $slots 获取到父组件传过来所有插槽名,接下来子组件遍历 $slots 动态渲染插槽即可

// 父组件
<template><div><MyInput v-model="text" placeholder="请输入地址"><template #prepend="{}"><el-select v-model="select" placeholder="Select" style="width: 115px"><el-option label="A" value="1" /><el-option label="B" value="2" /><el-option label="C" value="3" /></el-select></template><template #append><el-button :icon="Search" /></template></MyInput></div>
</template>
<script setup>
import MyInput from './components/MyInput.vue';
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
const text = ref('123');
const select = ref('')
</script>
// 也可以往插槽传值 slotData
<template><div class="item"><el-input v-bind="$attrs"><template v-for="(value,name) in $slots" #[name]="slotData"><slot :name="name" v-bind="slotData || {}"></slot></template></el-input></div>
</template>
<script setup>
import { onMounted, useSlots, useAttrs } from 'vue';const attrs = useAttrs();
const slots = useSlots() // 引入 useSlots
onMounted(() => {console.log(attrs);console.log(slots); // 输出如下图
})
</script>

在这里插入图片描述

父组件的 ref 怎么调用目标组件内部方法

我们要想通过父组件的 ref 调用到子组件内部方法(如 el-input 的 focus 方法)可以怎么做?其实可以通过 ref 链式调用,比如 focusRef.value.inp.value.focus(),但代码的可读性差

更好的方法是将所有方法暴露出去供父组件调用,可以利用 Proxy 对象来创建一个代理,并通过 defineExpose 将这个代理暴露给父组件。这个代理的目的是拦截对特定属性的访问,并将这些访问重定向到 inp.value(即 el-input 的引用)上,这样,父组件就可以通过组件的 ref 访问到 el-input 实例的属性

// 父组件
<template><div><MyInput v-model="text" placeholder="请输入地址" ref="focusRef"><template #prepend="{}"><el-select v-model="select" placeholder="Select" style="width: 115px"><el-option label="A" value="1" /><el-option label="B" value="2" /><el-option label="C" value="3" /></el-select></template><template #append><el-button :icon="Search" /></template></MyInput></div>
</template>
<script setup>
import MyInput from "./components/MyInput.vue";
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const text = ref("123");
const select = ref("");
const focusRef = ref();
onMounted(() => {focusRef.value.focus();
});
</script>
// 子组件
<template><div class="item"><el-input v-bind="$attrs" ref="inp"><template v-for="(value, name) in $slots" #[name]="slotData"><slot :name="name" v-bind="slotData || {}"></slot></template></el-input></div>
</template>
<script setup>
import { onMounted, useSlots, useAttrs, nextTick, ref } from "vue";const attrs = useAttrs();
const slots = useSlots();
const inp = ref();
onMounted(() => {console.log(attrs);console.log(slots);console.log(inp.value); // 这里输出如下图
});
defineExpose( // 使用 Proxy 代理暴露出去new Proxy({},{get(_target, prop) {return inp.value?.[prop];},has(_target, prop) {return prop in inp.value;},})
);
</script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

整体效果如图

在这里插入图片描述

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

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

相关文章

c++多态

1.多态的概念 通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同 的状态。 2.多态的定义及实现 2.1多态的构成条件 多态是在不同继承关系的类对象&#xff0c;去调用同一函数&#xff0c;产生了不同的行为…

docker安装Redis:docker离线安装Redis、docker在线安装Redis、Redis镜像下载、Redis配置、Redis命令

一、镜像下载 1、在线下载 在一台能连外网的linux上执行docker镜像拉取命令 docker pull redis:7.4.0 2、离线包下载 两种方式&#xff1a; 方式一&#xff1a; -&#xff09;在一台能连外网的linux上安装docker执行第一步的命令下载镜像 -&#xff09;导出 # 导出镜像…

【unity游戏开发之InputSystem——07】InputSystem+UGUI配合使用(基于unity6开发介绍)

文章目录 一、InputSystem+UGUI配合使用1、官方文档参考2、切换到新的输入模块二、UGUI中的新输入系统输入模块参数相关1、Send Pointer Hover To Parent2、Move Repeat Delay3、Move Repeat Rate4、XR Tracking Origin5、Deselect On Background CLick6、Pointer Behavior7、S…

国内优秀的FPGA设计公司主要分布在哪些城市?

近年来&#xff0c;国内FPGA行业发展迅速&#xff0c;随着5G通信、人工智能、大数据等新兴技术的崛起&#xff0c;FPGA设计企业的需求也迎来了爆发式增长。很多技术人才在求职时都会考虑城市的行业分布和发展潜力。因此&#xff0c;国内优秀的FPGA设计公司主要分布在哪些城市&a…

汇编基础语法及其示例

1.汇编指令 1.1汇编指令的基本格式 <opcode>{<cond>}{s} <Rd> , <Rn> , <shifter_operand> <功能码>{<条件码>}{cpsr影响位} <目标寄存器> , <第一操作寄存器> , <第二操作数> 注&#xff1a;第一操作寄存器…

Direct2D 极速教程(1) —— 画图形

极速导航 Direct2D 简介创建新项目&#xff1a;001-DrawGraphics弄一个白窗口在窗口上画图 Direct2D 简介 大家在学 WINAPI 的时候的时候有没有想过&#xff0c;怎么在一副窗口上画图呢&#xff1f;大家知道 Windows 系统是 GUI 图形用户界面 系统&#xff0c;以 Graphics 图形…

Linux之详谈——权限管理

目录 小 峰 编 程 ​编辑 一、权限概述 1、什么是权限 2、为什么要设置权限 3、Linux中的权限类别- 4、Linux中文件所有者 1&#xff09;所有者分类&#xff08;谁&#xff09; 2&#xff09;所有者的表示方法 ① u(the user who owns it)&#xff08;属主权限&…

基于金融新闻的大型语言模型强化学习在投资组合管理中的应用

“Financial News-Driven LLM Reinforcement Learning for Portfolio Management” 论文地址&#xff1a;https://arxiv.org/pdf/2411.11059 摘要 本研究探索了如何通过将大语言模型&#xff08;LLM&#xff09;支持的情感分析融入强化学习&#xff08;RL&#xff09;中&#…

K8s运维管理平台 - KubeSphere 3.x 和4.x 使用分析:功能较强,UI美观

目录标题 Lic使用感受优点&#xff1a;优化点&#xff1a; 实操首页项目 | 应用负载 | 配置 | 定制资源定义存储监控告警集群设置 **KubeSphere 3.x** 和 **4.x**1. **架构变化**&#xff1a;2. **多集群管理**&#xff1a;3. **增强的 DevOps 功能**&#xff1a;4. **监控与日…

当AI学会“顿悟”:DeepSeek-R1如何用强化学习突破推理边界?

开篇&#xff1a;一场AI的“青春期叛逆” 你有没有想过&#xff0c;AI模型在学会“推理”之前&#xff0c;可能也经历过一段“中二时期”&#xff1f;比如&#xff0c;解题时乱写一通、语言混搭、答案藏在火星文里……最近&#xff0c;一支名为DeepSeek-AI的团队&#xff0c;就…

Ollama+DeepSeek本地大模型部署

1、Ollama 官网&#xff1a;https://ollama.com/ Ollama可以干什么&#xff1f; 可以快速在本地部署和管理各种大语言模型&#xff0c;操作命令和dokcer类似。 mac安装ollama&#xff1a; # 安装ollama brew install ollama# 启动ollama服务&#xff08;默认11434端口&#xf…

论文笔记(六十三)Understanding Diffusion Models: A Unified Perspective(三)

Understanding Diffusion Models: A Unified Perspective&#xff08;三&#xff09; 文章概括 文章概括 引用&#xff1a; article{luo2022understanding,title{Understanding diffusion models: A unified perspective},author{Luo, Calvin},journal{arXiv preprint arXiv:…

mybatis(104/134)

动态sql标签&#xff0c;用于选择查询 if标签 where标签 &#xff1a;自动生成where&#xff0c;取决于后面有没有条件&#xff0c;会自动去除条件前面的and和or&#xff0c;不会去除语句后面的 trim标签&#xff1a;自动生成where&#xff0c;在语句后自动去除后缀and和or for…

【数据结构】动态内存管理函数

动态内存管理 为什么存在动态内存管理动态内存函数的介绍&#x1f38a;malloc补充&#xff1a;perror函数&#x1f38a;free&#x1f38a;calloc&#x1f38a;realloc 常见动态内存错误对空指针的解引用操作对动态开辟空间的越界访问对非动态开辟内存使用free释放使用free释放一…

文档智能扫描,提升无纸化办公效率

随着无纸化办公的推广和移动设备的普及&#xff0c;用户迫切需要将纸质文档快速、准确地转换成电子格式&#xff0c;以提高工作效率和信息管理的便捷性。同时&#xff0c;用户将文档扫描成电子版后&#xff0c;可以自行通过加密和访问控制提高电子文档的安全性&#xff0c;以满…

汇编的使用总结

一、汇编的组成 1、汇编指令&#xff08;指令集&#xff09; 数据处理指令: 数据搬移指令 数据移位指令 位运算指令 算术运算指令 比较指令 跳转指令 内存读写指令 状态寄存器传送指令 异常产生指令等 2、伪指令 不是汇编指令&#xff0c;但是可以起到指令的作用&#xff0c;伪…

python实现dbscan

python实现dbscan 原理 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法。它将簇定义为密度相连的点的最大集合&#xff0c;能够把具有足够高密度的区域划分为簇&#xff0c;并可在噪声的空间数据库中发现任意形…

gesp(C++六级)(4)洛谷:B3874:[GESP202309 六级] 小杨的握手问题

gesp(C六级)&#xff08;4&#xff09;洛谷&#xff1a;B3874&#xff1a;[GESP202309 六级] 小杨的握手问题 题目描述 小杨的班级里共有 N N N 名同学&#xff0c;学号从 0 0 0 至 N − 1 N-1 N−1。 某节课上&#xff0c;老师安排全班同学进行一次握手游戏&#xff0c;具…

【自然语言处理(NLP)】机器翻译之数据处理(数据收集、数据清洗、数据分词、数据标注、数据划分)

文章目录 介绍机器翻译之数据处理数据收集数据清洗数据分词数据标注数据划分代码实现导包数据查看处理函数数据预处理词元化统计每句话的长度的分布情况截断或者填充文本序列将机器翻译的文本序列转换成小批量tensor加载数据试用一下 个人主页&#xff1a;道友老李 欢迎加入社区…

【物联网】ARM核常用指令(详解):数据传送、计算、位运算、比较、跳转、内存访问、CPSR/SPSR、流水线及伪指令

文章目录 指令格式&#xff08;重点&#xff09;1. 立即数2. 寄存器位移 一、数据传送指令1. MOV指令2. MVN指令3. LDR指令 二、数据计算指令1. ADD指令1. SUB指令1. MUL指令 三、位运算指令1. AND指令2. ORR指令3. EOR指令4. BIC指令 四、比较指令五、跳转指令1. B/BL指令2. l…