站长工具

vue3 如何在 jsx中使用 component 组件

作者：guojikun

component 组件不像其它的内置组件(tansition、transitionGroup),可以直接从 vue 中直接导出，所有要在 jsx 使用component就要使用 h 函数

使用 vue 内置组件

// xxx.jsx
import { defineComponent, Transition } from 'vue';

export default defineComponent({
    name: "v-test",
    setup(props, { attrs, slots }){
        return () => <Transition><div>{ slots.default?.() }</div></Transition>
    }
})

使用动态组件-component

// xxx.jsx
import { defineComponent } from 'vue';

export default defineComponent({
    name: "v-test",
    props:{
        tag: {
            type: String,
            default: "div",
        }
    },
    setup(props, { attrs, slots }){
        return () => h(props.tag, {...attrs}, slots.default?.())
    }
})
本文转载于网络 如有侵权请联系删除

相关文章

  • 传统图像处理算法总结

    大家好，又见面了，我是你们的朋友全栈君。1.图像滤波目的：保证图像细节特征的条件下抑制图像噪声。1.1线性滤波1.11方框滤波原图像与内核的系数加权求和 方框滤波的核： normalize=true时，方框滤波就变成了均值滤波。也就是说，均值滤波是方框滤波归一化（normalized）后的特殊情况。方框滤波的缺点：丢失了图像的边缘信息。opencv函数：boxFilter(src,dst,-1,Size(10,10)); 效果图： 1.12均值滤波内核中心点的像素值为内核中所有点像素的平均值 均值滤波的核： 均值滤波的缺点：在图像去噪的同时也破坏了图像的细节部分,使图像模糊。opencv函数：blur(src,dst,Size(10,10)); 效果图： 1.13高斯滤波原图像与满足正态分布的内核做卷积 由于正态分布也被称为高斯分布，因此这项技术被称为高斯模糊。高斯滤波的核： 高斯滤波的优点：对于抑制服从正态分布的（高斯）噪声非常有效。**opencv函数：GaussianBlur(src,dst,Size(5,5),0,0);** //sigmaX和sigmaY都是0，就由ksiz

  • Leetcode|sort+双指针|88. 合并两个有序数组

    1双指针classSolution{ public: voidmerge(vector<int>&nums1,intm,vector<int>&nums2,intn){ intidx1=0,idx2=0; vector<int>tmp; while(idx1<m||idx2<n){ if(idx1==m) tmp.emplace_back(nums2[idx2++]); elseif(idx2==n) tmp.emplace_back(nums1[idx1++]); elseif(nums1[idx1]<nums2[idx2]) tmp.emplace_back(nums1[idx1++]); elsetmp.emplace_back(nums2[idx2++]); } for(inti=0;i<n+m;i++) nums1[i]=tmp[i]; } };复制

  • 造车这事，巨头们太草率了

    ​配图来自Canva可画不知是提前通气了，还是纯属巧合，最近宣布造车的企业再次呈现扎堆之势。有做智能手机和智能家居的小米，也有做扫地机器人的石头科技，还有做无人机的大疆。造车好像一下子就变成了易如反掌的事，给大众带来一种人人都能造的感觉。事实上这波由场外选手掀起的“造车运动”，去年就已经启动了。比如百度和吉利、苹果和现代、滴滴和比亚迪。明面上看，这些场外选手大多都是纯互联网业务或智能硬件起家，几乎和汽车，甚至和出行都没有什么直接的关系，而且造车极其烧钱，百度说去年投了200亿造车，恒大汽车此前也表示已经烧了快500亿，“造车新势力”也统统困于财务亏损，造车这样一件费心费钱的事，为啥还有这么多后来者愿意投身其中？超级蛋糕的诱惑企业的本能是追求盈利，业务跨界道理一样，小米也好，大疆也好，驱动它们造车的动力都是市场。但这个市场指的其实不完全是大众此前所认知的新能源汽车市场，而是新能源汽车和汽车生态这两个未来市场，通俗地说，就是买车和买服务这两块市场。新能源汽车的市场有多大？商务部给出的数据显示，去年新能源车产销量大概占比都在5.4%这一比例。长远来看，新能源车会完全代替传统能源汽车，所以新能

  • 细数Java技术架构这些年的发展史

    前言 Java一度被称为是应用最广泛的编程语言。尤其在Javaweb方面，Java作为后台服务器开发语言，尤其是它跨平台一次编译随处运行的特性，更是受到不少企业和工程师们的爱戴。作为应用开发的主要语言，Java也需要借助其他很多优秀的框架，来实现系统或程序的完整性。针对不同的业务场景，选择合适的框架，是每一个架构师和工程师在开发一项软件之前，必须首先要考虑的事情。随着时代的进步和科技的发展，Java技术框架也在日新月异的进化。一、Struts1.0Struts1.0是早期的应用很广泛的web框架了，很多企业的管理系统和网站都是基于这个技术架构做的。Struts的第一个版本是在2001年5月份发布的。它的最初设想是：通过结合JSP和Servlet，使Web应用的视图和业务/应用逻辑得以清晰地分离开来。在Struts之前，最常见的做法是在JSP中加入业务和应用逻辑，或者在Servlet中通过println()来生成视图。整体框架结构基本流程是：客户端发送请求（HttpRequest），被struts1的核心控件器ActionServlet接收。ActionServlet根据struts-c

  • 如何解决网页的宽高自适应问题

    1问题描述在假期里较系统的学习了html的静态网页制作，但在这过程中出现了一系列问题，比如：如何用盒子模型布局；如何用html和css实现轮播图的效果等；值得我们关注的是很多同学遇到了一个相同的问题，当我们的静态网页在其他PC端显示时，会出现排版混乱等情况，那么该如何解决宽高自适应的问题呢？在我经过几天的接触和学习之后，我对如何解决自适应问题有了初步的认识和经验，在此分享给大家，帮助大家快速了解和学习html。2问题分析一般而言，在我们设计网页的时候，经常会遇到自适应问题，实际这些工作完全可以交给浏览器来完成就可以了，只可惜，无论什么浏览器在自适应这个问题上都处理的不尽人意，在网上查询到的解决办法有很多，但有些解决办法并不是很适合我们这样的初学者，所以在解决一些技术上的问题的时候，我们需要选择适合自己的方式，除此之外，也要加强对基础知识的巩固，那么遇到问题的时候就可以迎难而解了。 3解决方案自适应布局分两类：高度和宽度a.高度自适应布局高度自适应的原理就是把每个模块设置为绝对定位，再设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，这样一来就实现了自适应。

  • Django进阶篇 Rest framework (五)

    ①生成项目使用pycharm作为集成开发工具，创建django项目查看Python和第三方库源码很方便，使用pycharm创建一个django项目，然后将djangorestframework作为第三方包放入django项目中。 框架篇-Django博客应用-创建项目 添加至项目下的settings.py文件的INSTALLED_APPS=[]中②数据库设计先来看下如果不使用drf怎么进行用户认证，通常使用字段验证的方式，来生成相应的数据库，在用户登录的时候，对数据库查询，简单的数据库设计如下：简单的用户信息，每个用户关联一个一对一的usertoken作为验证。然后在项目的目录下执行生成数据库的命令：pythonmanage.pymakemigrationspythonmanage.pymigrate框架篇-Django博客应用-更新首页 ③视图函数md5函数根据用户名和用户的访问时间进行加密；当用户第一次访问时，数据库创建用户，并将token字符串，存储到数据库；当用户下次访问的时候，需要带着这个字符串与数据库比对，并返回相应的提示信息；这里的token，暂时没有放回浏览器端，真正项

  • 数组问题

    一、求数组中的子数组累加和最大的 publicintFindGreatestSumOfSubArray(int[]array){ intres=Integer.MIN_VALUE; intsum=0; for(inti=0;i<array.length;i++){ sum+=array[i]; res=Math.max(res,sum); sum=sum<0?0:sum; } returnres; }复制最小的k个数publicvoidswap(int[]arr,inti,intj){ inttemp=arr[i]; arr[i]=arr[j]; arr[j]=temp; } publicintpartition(int[]arr,intleft,intright){ intless=left-1; intmore=right; intcur=left; while(cur<more){ if(arr[cur]<arr[right]){ swap(arr,++less,cur++); }elseif(arr[cur]==arr[right]){ cur++;

  • Python算法和数据结构：在二叉树中找到和为sum的所有路径

    思路：先用递归创建一颗二叉树，作为输入；然后对这课二查树进行递归遍历，递归中每遍历一个节点，下次递归的和为sum-data;并用一个数组记录遍历过的路径，当存在sum时，输出数组中的路径。下图为树的输入，输入的数组为：[10,5,4,None,3,None,None,7,None,None,12,None,None]没有子节点的用None表示，构造树时用递归先构造左子树。代码：""" 题目：输入一个整数和一棵二元树。 从树的根结点开始往下访问一直到叶结点所经过的所有结点形成一条路径。 打印出和与输入整数相等的所有路径。 """ classTreeNode: """ 树的节点定义，后面的很多操作都是基于节点的 """ def__init__(self): """ 定义一个树的节点，初始状态左右节点为空 """ self.leftNode=None self.rightNode=None defsetD

  • Spark 和 Hadoop 是朋友不是敌人

    6月15日，IBM宣布计划大规模投资Spark相关技术，此项声明会促使越来越多的工程师学习Spark技术，并且大量的企业也会采用Spark技术。Spark投资的良性循环会使Spark技术发展更加成熟，并且可以从整个大数据环境中获益。然而，Spark的快速增长给人们一个奇怪且固执的误解：Spark将取代Hadoop，而不是作为Hadoop的补充。这样的误解可以从类似“旨在比下Hadoop的新软件”和“企业将放弃大数据技术Hadoop”的标题中看出来。作为一个长期的大数据实践者，雅虎投资Hadoop的早期倡导者，一个为企业提供大数据服务的公司的CEO，我想在这篇文章中提出几个明确的观点。Spark和Hadoop会和谐相处。越来越多的企业选择Hadoop做大数据平台，而Spark是运行于Hadoop顶层的内存处理方案。Hadoop最大的用户——包括eBay和雅虎——都在Hadoop集群中运行着Spark。Cloudera和Hortonworks将Spark列为他们Hadoop发行的一部分。自从我们推出Spark之后，用户一直在使用着Spark。将Spark置于和Hadoop对立的位置，就好像

  • 大数据能给出结论，但给不了解释

    当下中国，大数据是个热词。大数据是怎样发挥价值的？关注到腾讯近日发布的大数据报告《95后迷之隐私观大揭秘》，记者走进位于深圳的腾讯总部，走进那些让数据“活”起来的人。记者在这里却看到，人与人交流的传统调研模式，不仅没有被所谓大数据掩埋，反而在大数据时代，被一个个数据又激发出来。大数据给不出解释搞大数据研发，不就是坐在实验室、电脑前，整天对着数字噼里啪啦地运算？可腾讯公司用户与市场研究中心调研员韩娜，更多地是奔波在见调研对象的路上。韩娜讲了一个对于她来说“家常”的故事。一年冬天，她从南方的深圳赶到北方的沈阳，约了一个孩子做用户调研。本来知情的父母临时有事不在，孩子的姑姑不让韩娜进门。韩娜拿出身份证、工作证、介绍信，反复解释，但所有证明一概无用，对方就是不肯相信。最终，韩娜被“砰”的一声拒之门外。类似的经历，韩娜所在的团队几乎人人都遇到过。很多人不理解，一个互联网公司怎么还用上门调研这种“老土”的方式？的确，拥有7.62亿月活跃微信账户、8.77亿月活跃QQ账户的腾讯，并不缺乏用户社交的大数据，但光有数字就行了吗？“大数据给出了结论，但给不了解释。”用户与市场研究中心总监谭池举了一个他自己

  • Linux内核中container_of函数详解

    在Linux内核中，container_of函数使用非常广，例如Linux内核链表list_head、工作队列work_struct中在Linux内核中有一个大名鼎鼎的宏container_of()，这个宏是用来干嘛的呢？我们先来看看它在内核中是怎样定义的。我们先来分析一下container_of(ptr,type,member),这里面有ptr,type,member分别代表指针、类型、成员。看一个例子: Structtest { inti; intj; chark; }; Structtesttemp;现在呢如果我想通过temp.j的地址找到temp的首地址就可以使用container_of(&temp.j,structtest,j);现在我们知道container_of()的作用就是通过一个结构变量中一个成员的地址找到这个结构体变量的首地址。下面来看看比较复杂的内容:我们用上面的structtest张展一下Consttypeof(((structtest*)0)->j)*__mptr=(&temp.j);//(sturcttest*)0表示数据段基址其中，t

  • Android Loader详解

    一，android装载器基本方法装载器从android3.0开始引进。它使得在activity或fragment中异步加载数据变得简单。装载器具有如下特性：它们对每个Activity和Fragment都有效。他们提供了异步加载数据的能力。它们监视数据源的一将一动并在内容改变时传送新的结果。当由于配置改变而被重新创建后，它们自动重连到上一个加载器的游标，所以不必重新查询数据。装载器API概述 在使用装载器时，会涉及很多类和接口们，我们在下表中对它们总结一下：Class/Interface说明LoaderManager一个抽像类，关联到一个Activity或Fragment，管理一个或多个装载器的实例。这帮助一个应用管理那些与Activity或Fragment的生命周期相关的长时间运行的的操作。最常见的方式是与一个CursorLoader一起使用，然而应用是可以随便写它们自己的装载器以加载其它类型的数据。每个activity或fragment只有一个LoaderManager。但是一个LoaderManager可以拥有多个装载器。LoaderManager.LoaderCallbacks一

  • Docker 常用命令

    Docker常用命令 操作容器 启动容器 启动容器并启动bash（交互方式）: $dockerrun-i-t<image_name/continar_id>/bin/bash 复制 启动容器以后台方式运行(更通用的方式）： $dockerrun-d-itimage_name 复制 ps：这里的image_name包含了tag：hello.demo.kdemo:v1.0 附着到容器 附着到正在运行的容器 dockerattach<id、container_name> 复制 进入正在运行的容器内部，同时运行bash(比attach更好用) dockerexec-t-i<id/container_name>/bin/bash 复制 ps：dockerexec是如此的有用，以至于我们通常是将其封装为一个脚本，放到全局可调用的地方，比如，可以写成一个indocker.sh： $catindocker.sh dockerexec-t-i$1/bin/bash #查看需要附着的容器id $dockerps|less-S CONTAINERIDIMA

  • python文章正文提取

    参考资料： cx-extractor，地址：https://code.google.com/archive/p/cx-extractor/  https://github.com/chrislinan/cx-extractor-python Boilerpipe，地址：http://code.google.com/p/boilerpipe/ Html2Article，地址： http://www.cnblogs.com/jasondan/p/3497757.html https://github.com/stanzhai/Html2Article python：https://github.com/zhuyf8899/Html2Article pythongoose，地址：https://github.com/grangier/python-goose Readability，Python版本：https://github.com/timbertson/python-readability newspaper，地址：https://github.com/c

  • unity 改变鼠标样式的两种方法

    1、第一个直接改变鼠标样式 1#pragmastrict 2publicvarcursorTexture:Texture2D; 3privatevarchangeFlag=false; 4functionUpdate(){ 5if(changeFlag){ 6Cursor.SetCursor(cursorTexture,Vector2.zero,CursorMode.Auto); 7}else{ 8Cursor.SetCursor(null,Vector2.zero,CursorMode.Auto); 9} 10} 11 12functionOnGUI(){ 13if(GUI.Button(Rect(10,10,100,50),"hand")){ 14changeFlag=true; 15} 16if(GUI.Button(Rect(120,10,100,50),"arrow")){ 17changeFlag=false; 18} 19}复制 2、隐藏鼠标，在鼠标位置放一新图片 1#pragmastrict 2publicvarcursorTexture:Texture2D; 3

  • 分治法学习

    经典分治: 215.数组中的第K个最大元素 题解:使用快排的思想找第K大，如果当前的下标pivot==k，那么我们找到了对应的元素；如果pivot>k，那么要寻找的元素在pivot左边；如果pivot<k,那么要寻找的元素在pivot右边。 classSolution(object): deffindKthLargest(self,nums,k): """ :typenums:List[int] :typek:int :rtype:int """ defpartition(l,r): pivot=nums[l] whilel<r: whilel<randnums[r]<=pivot: r-=1 nums[l]=nums[r] whilel<randnums[l]>=pivot: l+=1 nums[r]=nums[l] nums[l]=pivot returnl deffind_K(l,r,k): ifl>r:return pivot=partition(l,r) ifpivot==k:return ifk<pivot: f

  • 多使用isset，少使用in_array

    输入： $input=[ 　　　　"john"=>65, 　　　　"tom"=>70,       "jack"=>90, ] 判断姓名$name="jack"是否在$input中： 刚接触php时很容易使用：in_array($name,$input)，此时时间复杂度为O(n) 优化：isset($input[$name]) 如果返回值非空且不为null，则说明$name存在于$input，时间复杂度为O(1)  

  • risc_v介绍

    RISC-V（发音为"risk-five"）是一个基于精简指令集（RISC）原则的开源指令集架构（ISA）。与大多数指令集相比，RISC-V指令集可以自由地用于任何目的，允许任何人设计、制造和销售RISC-V芯片和软件。虽然这不是第一个开源指令集，但它具有重要意义，因为其设计使其适用于现代计算设备（如仓库规模云计算机、高端移动电话和微小嵌入式系统）。设计者考虑到了这些用途中的性能与功率效率。该指令集还具有众多支持的软件，这解决了新指令集通常的弱点。 该项目2010年始于加州大学伯克利分校，但许多贡献者是该大学以外的志愿者和行业工作者。 RISC-V指令集的设计考虑了小型、快速、低功耗的现实情况来实做，但并没有对特定的微架构做过度的设计。 在处理器领域，目前主流的架构为x86与ARM架构，但它们作为商用的架构，为了能够保持架构的向后兼容性，其不得不保留许多过时的定义。久而久之就变得极为冗长。RISC-V架构相对而言不用向后兼容。目前的"RISC-V架构文档"分为"指令集文档"（riscv-spec-v2.2.pdf）和"特权架构文档"（riscv-privileged-v1.10.pdf

  • 常用服务器响应面整理

    200:成功响应 201:新资源在服务器端被创建 http.response.code==201 3xx:在RFC中规定客户端重定向次数不应该超过5次，以防止死循环 301:永久重定向 302:临时重定向 4xx:客户端出现错误 400:Unauthorized请求格式的错误 401:用户认证信息错误或没有通过在服务器上 407:ProxyAuthenticationRequired用户认证信息错误或没有通过在代理服务器上 403:Forbidden权限错误 404:NotFound:服务器没有找到资源 408:服务器接收请求超时 413:请求的包体超出服务器处理的最大长度 414：请求的URL超出服务器接收的最大长度 415:上传的文件类型服务器不支持 421:服务器任务这个请求不应该发给他，他没有能力去处理 429:客户端发送请求的速率过快 431:发送的请求头部过大 451:由于法律资源请求头部不可用 5xx:服务器端错误 500:服务器内部错误 501:服务器端不支持请求所需要的功能 502:代理服务器无法响应 503:服务器资源尚未准备好处理当前请求。（像服务器限速） 504

  • Python函数式编程

    在Python中使用函数式编程的最佳实践！ 简介 Python是一种功能丰富的高级编程语言。它有通用的标准库，支持多种编程语言范式，还有许多内部的透明度。如果你愿意，还可以查看Python的底层并修改，甚至能在程序运行的时候直接修改运行时。 我最近注意到一个有经验的Python程序员使用Python的新方法。就像许多Python新手一样，我在第一次看到Python时喜欢它的简单易懂的基本循环、函数和类定义的语法。在掌握了基础语法之后，我开始对高级功能感兴趣，如继承、生成器、元编程等。但是，我不太清楚它们的使用方法，经常会在不恰当的地方使用。有一段时间里我写的代码复杂又难理解。后来我反复修改，特别是需要长期在同一段代码上工作时，最终会将大部分代码慢慢改回使用基本的函数、循环、单例类。 尽管如此，那些高级功能一定有其存在的理由，它们也一定是非常重要的工具。很明显，“怎样编写优秀的代码”是个非常广泛的话题，甚至没有唯一的正确答案！相反，这篇文章的目标是一个特定的话题：Python中函数式编程的应用。我将讨论函数式是什么，怎样在Python中使用，并根据我的经验介绍最佳使用方法。 号：9234

  • ASP.NET MVC 5 入门教程 (1) 新建项目

    文章来源：Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc-5-get-started-create-project.html  下一节：ASP.NETMVC5入门教程(2)控制器Controller 本教程使用VisualStudioExpress2013forWeb运行，强烈建议跟着教程边看边做。如果在操作中遇到什么问题，欢迎留言指出。 VisualStudioExpress2013forWeb下载地址：点我访问下载页面 源码下载：点我下载 运行VisualStudioExpress2013forWeb。VS会默认显示起始页，如下图所示。点击新建项目。 在弹出的新建项目对话框中，左侧选择已安装->模板->VisualC#->Web。然后在窗口中间选择.NETFramework4.5。选择ASP.NETWeb应用程序。项目名称写为SlarkInc。然后点击确定。 在弹出的对话框中选择MVC,然后点击确定。之后VisualStudio会自动为您创建项目。 项目生成完成后就会出现如下页面。点击绿色箭头Inte

相关推荐

推荐阅读