vue(三)之组件

最新推荐文章于 2023-10-10 09:53:42 发布
最新推荐文章于 2023-10-10 09:53:42 发布
阅读量101 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42968500/article/details/104203039
版权

在这里插入图片描述
ES6开始可以使用“Tab”健上面的点健来声明字符串，这样的好处是可以直接换行而不需要使用+号
使用组件必须需要放到vue的实例里面（一般是在div中）

全局组件与局部组件

直接在new vue里面注册的组件则是局部组件只能在当前的vue实例里面使用
在这里插入图片描述

父子组件

在一个父组件中注册另一个组件，然后就可以在父组件内部使用被注册的组件
在这里插入图片描述

注册组件的语法糖写法

全局注册
在这里插入图片描述
局部注册
在这里插入图片描述

组件模板的抽离写法

方式一
在这里插入图片描述
方式二
在这里插入图片描述
组件不能访问vue实例里的数据，组件自己可以有数据
在这里插入图片描述
在这里插入图片描述

父子组件的通信

在这里插入图片描述
props的使用
在这里插入图片描述
在这里插入图片描述
props数据验证
在这里插入图片描述
props驼峰标志，在使用的时候必须转为下划线
在这里插入图片描述
在这里插入图片描述

子级向父级传递

子模板触发事件
在这里插入图片描述
在组件的methods将内容emit出去
在这里插入图片描述
传入会父组件
在这里插入图片描述
在父组件的methods中再进行处理
在这里插入图片描述
通过$children拿到子组件的内容，但是一般不这么用
在这里插入图片描述

通过$ref拿到子组件的内容，这种方式使用较多
这种方式使用前需要指定内容
在这里插入图片描述
接着才能在父组件中获得
在这里插入图片描述

通过$parent拿到父组件的内容，但基本不用，通过通过root访问根组件，也用的很少
在这里插入图片描述
在这里插入图片描述

CQ623
关注
专栏目录
VUE篇之日历组件
ae_pppppp的博客
12-13 8344
手写日历组件
VUE3 之 组件传参
追风人的博客
01-21 5115
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述 韦奇定律告诉我们：大部分人都很容易被别人的话所左右，从而开始动摇、怀疑，最终迷失自我。因此我们要努力的坚定信念，相信自己，才不会被周围的环境所左右，才能取得最终的胜利。 言归正传，之前我们聊了组件的概念，既然有多个组件，那自然存在组件间传参的问题，今天我们就来聊聊 VUE 的 组件传参。 2. 组件传参 2.1 初识组件传参 <body> <div id="myDiv">
vue之组件销毁
seimeii的博客
09-26 1万+
组件销毁有很多种情况 比如页面关闭，路由跳转（没有使用keep-alive时的路由切换） 还可以使用v-if和改变key值来销毁组件，这属于手动销毁组件 代码：<v-detection :detectionid="detectionid" v-if="hackReset"></v-detection> 声明hackReset，利用true或者false实现重建或者销毁 代码： this.hackReset = false;//销毁组件 this.$nex
Vue组件之动态组件
404源码社区 - Admin404
01-22 1万+
动态组件：不同组件之间进行动态切换，通过 Vue 的元素加一个特殊的 is attribute 实现 1. 基础使用 component的is 属性值是组件名，就可以调用该组件 <component is="comb"></component> <div id="app"> <component is="comb"></component> </div> <script> var coma = { t...
Vue的组件化编程
暗武逢天的博客
07-11 2万+
Vue组件化
Vue实现递归组件
weixin_53291256的博客
04-05 1万+
Vue实现递归组件 文章目录Vue实现递归组件前言一、递归组件是什么？二、Vue实现递归的核心思路三、代码示例1.父级2.子级3、实现效果四、总结 前言 在我们开发过程中，为了提高开发效率，降低开发难度，我们会直接使用组件库来实现，同时也衍生出了很多优秀的组件库，如：饿了么、蚂蚁、Iview、vant等等。但是有时这些组件库提供给我们的组件不满足我们的需求或者定制组件时成本太高，那么我们就要手动实现了。 一、递归组件是什么？ 字面理解为层层递进最后归并到一起，它的特点就是层级分明。 例如饿了么组件库的树
Vue3 父子组件传值
新人一枚，互相学习哦！
06-13 4078
使用vue3进行父子组件传值
Vue3组件传参之父子组件传参
wxid_mtnujb6ipc0322的博客
10-10 5275
在Vue3中，父子组件之间的通信是一项常见的任务。本文将介绍一些在Vue3中实现父子组件之间传值的方法。
Vue 自定义组件
qq_41775769的博客
03-13 2万+
Vue 自定义组件与使用 1. 初识组件   组件：如果项目中多次用到类似的效果，就可以把这个效果进行自定义组件。新建项目后默认存在 HelloWorld.vue 就是一个组件，组件必须导入之后才能使用，其中 HelloWorld 为自定义名称，通过这个名称就可以调用对应组件。   components：组件文件只导入是不能被调用的，还必须在 components 中注册组件，注册后在 <template> 中就可以通过组件名直接引用组件了。在 <template> 中组件以标签形式
vue3 异步组件
秋来九月八
10-24 5120
前端开发经常遇到异步的问题，请求函数，链接库，等，都有可能需要通过promise或者async await 来进行异步的一个封装。 异步组件也由此诞生，我用settimeout来模拟一个vue3的异步组件
Cube.vue 三维立方体 vue 组件
04-30
一个vue组件 （**.vue）
VUE3实用组件开发合集二：时钟、倒计时组件
07-11
VUE3实用组件开发合集二：时钟、倒计时组件，包括源码，开发文档、素材等。 使用vue3开发时钟、倒计时组件组件，实现电子时钟、钟表、农历、秒表、定时器及各种预定义样式等。封装为组件，可直接调用，通过参数可...
vue中组件的props属性（详）
热门推荐
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
rhino grasshoper 框内物体排列（附视频）.gh
最新发布
10-18
【闭合线内物体按方向移动/排列】https://www.bilibili.com/video/BV1z1WfeSEWu?vd_source=b420114c993138474d2e93d83ead77a5
kwant-1.4.3-cp38-cp38-win_amd64.whl
10-18
kwant-1.4.3-cp38-cp38-win_amd64.whl
rhino grasshoper 景观椅（附视频）.gh
10-18
【rhino@grasshoper 曲线金属座椅景观案例（文件获取/见简介）】https://www.bilibili.com/video/BV1Dx4y147Lr?vd_source=b420114c993138474d2e93d83ead77a5
PCIe通义万问系列文档的第一部已整理完毕，含999个PCIe相关问答
10-18
《PCIe通义万问》系列文档旨在记录PCIe相关行业工程师们在PCIe协议学习、IP设计验证、产品测试及使用过程中遇到的问题、迸发的思考、进行的探讨及可能的解决方案，以期给遇到相同相似问题的同行们些许启发。文档涉及的技术方向主要为PCIe，也包含PCIe相关的CXL、UCIe及计算机体系结构相关内容。 本文档是《PCIe通义万问》系列文档之（一），含999个问题。问题内容有以下三个来源：MangoPapa（下称博主）的“PCIe每日一问一答”系列专栏；博主的博文留言及私信讨论；博主作为群主的“PCIe技术交流群”群聊内容。MangoPapa小助理、折叠、先杰、CR小队长、kangling共同完成了问答内容提取与归纳整理，噫嘘唏及慕荷负责文辞优化及编辑排版，上述人员及MangoPapa、JasonW、皮塞阿姨、席可儿参与了文档内容的审校。感谢以上人员的无私奉献。 本文档仅对讨论内容进行总结记录，不保证问题答案的正确性，部分问题只提供解决思路或讨论过程。术业有专攻，文内定有偏颇。如您发现谬误，一敬希原宥，二望乞点拨；如您持异见，欢迎来信讨论。如有需要，欢迎联系MangoPapa加入相关
毕业设计论文SpringBoot招投标管理系统.docx
10-18
毕业设计论文
直观的大型模型应用软件-有机体-eva.zip
10-18
直观的大型模型应用软件-有机体-eva
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值