浅入深出Vue:子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方。在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题。那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题。
如何传递
父组件向子组件在进行传递时,使用的是 prop
特性进行传递。
约定
老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件:
子组件的
props
中定义要传递的变量名变量名同组件的命名规范
父组件传值时,需要使用短横线分隔命名
使用
v-bind
进行传值
定义
首先在子组件中定义:
// Child.vueexport default {name: 'child'props: ['teamList']
}
这里使用了驼峰命名,在传值时需注意要转换成短横线分隔命名。
我们定义了一个 teamList
的变量,此时我们就可以在这个组件中通过 this
使用这个变量了(同 data
中的数据)。
传值
在父组件中进行传值:
<template><div><child v-bind:teamList="teamList"></child></div>
</template>
父组件中使用 v-bind
即可将数据传递下去了。
向子组件传递数据就是这么简单,本质上和 data
一样,只是这里单独使用 prop
特性将其区分开来。
需要注意的时:
- 通过
prop
特性传递下去的数组是 “单向”绑定的,父组件对数组的更新会影响到子组件。因此并不建议子组件对prop
特性中的值进行修改
Js中在传递对象和数组时传递的时引用!因此:当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态
这个特性有利有弊,在某些情况下可以通过这种类似 hack
的方式来进行处理。
子组件反向传递
上面说到了,并不建议在子组件中修改 props
中的数据。那么当需要向父组件进行某种反馈时怎么办呢?
假设现在我们有一个登录弹出框的组件,通过子组件的方式调用了,当我们登录成功时该如何通知父组件做出相应的反应呢?
通过自定义事件,子组件调用
this.$emit('事件名', 参数)
使用
v-model
、组件中model
选项与input
事件模拟成input
控件,对父组件中的值进行更新.sync
修饰符进行 “双向绑定”
这里只介绍第一种方式,因为后两种方式若羽也没用过几次 o(╯□╰)o
emit使用约定
事件名的命名规范同组件
父组件在绑定子组件上的自定义事件时,必须完全匹配事件名,这里不像组件与子组件中使用时是使用的短横线分隔命名,而是完全匹配。
约定较少,主要注意使用时是和组件不同的,名称需要完全匹配。
emit使用
首先我们在子组件中定义事件,说是定义,不如说是调用。因为是子组件直接在某段逻辑中调用的emit
:
// child.vueexport default {methods: {submit() {this.$emit('submitForm', this.data)}}
}
这里我们定义了调用的自定义事件名称为 submitForm
,那么在父组件中使用:
<!-- parent.vue --><template><div><child v-on:submitForm="submit"></child></div>
</template>
可以看到这里在使用时, v-on
绑定的事件名称是 submitForm
而不是 submit-form
。
这一点需要注意。
写在后面
这一篇内容较少,因为接下来的入门篇将会用项目实践来更好的演示它们的用法。同时,初学之时也不太建议在用法多样性上关注太多。
在实践中学习、成长
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1vu8349ugeh09
转载于:https://www.cnblogs.com/By-ruoyu/p/11165969.html
浅入深出Vue:子组件与数据传递相关推荐
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- 浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...
- 浅入深出Vue:文章编辑
登录与注册功能都已经实现,现在是时候来开发文章编辑功能了. 这里咱们就使用 markdown 作为编辑语言吧,简洁通用.那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢. ...
- 浅入深出Vue:注册
基本布局已经有了, 现在我们来开始做我们的注册页面~ 当然需要注册才能发表文章啊(糟老头子坏得很, 我可以只有我一个人能发啊). 这里我们设定只有注册才能发表文章,也就淡化了管理员这个概念.在开发中先 ...
- 浅入深出Vue:发布项目
项目完成之后,当然不能满足于在我们的开发环境下跑一跑.我们可以打包发布到服务器上,让大家一起来欣赏一下你的作品. 那么 vue 项目如何打包发布呢,新建的项目目录下通常都有一个 README.md 的 ...
- 浅入深出之Java集合框架(上)
Java中的集合框架(上) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到浅入深出之Java集合框架(下). ...
- 浅入深出之Java集合框架(中)
Java中的集合框架(中) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到浅入深出之Java集合框架(下). ...
- Angular浅入深出系列 - 写在前面
本系列目录: 写在前面 基础知识 控制器(Controller) 作用域(Scope) 集合(Collection) 模块(Module) 依赖注入(Dependency Injection) 服务( ...
- 处理中文乱码_浅入深出:一次提问引发的深思,从此再也不怕“乱码”问题
这是恋习Python之浅入深出系列第3篇原创首发文章 作者|丁彦军 来源|恋习Python(ID:sldata2017) 转载请联系授权(微信ID:2394608316) 近日,有位粉丝向我请教,在爬 ...
最新文章
- 【重大更新】DevExpress v17.1新版亮点(DevExtreme HTML5/JS篇)
- ECS服务器CPU使用率异常100%问题排查
- 全球及中国一般手术器械行业投资态势与发展价值评估报告2022版
- 强化学习-动态规划_强化学习-第4部分
- 安装Red Hat Container Development Kit 2.2版本
- verilog设置24进制计数器_阅读笔记:《Verilog HDL入门》第3章 Verilog语言要素
- 开发经验分享_03_解决问题3步走(思路)
- linux定时监控端口并重新启动shell脚本命令
- BOSS直聘:2020一季度平均招聘薪资8609元 同比增长2.8%
- python 字符串 包含 列表_python中包含字符串列表的列
- druid Approximate Histograms
- php 数组添加键值对,php 给数组增加键值对
- python刷抖音浏览_Python 一键批量下载抖音无水印视频
- webgis期末考试试题_WebGIS考试参考试题
- 【总结】1164- 一篇非常 Nice 的 UmiJS 教程
- 移动互联网产品数据分析
- Android webview 播放视频及全屏
- ipa 上传卡在鉴权_上传app,一直卡在“正在通过 App Store 进行鉴定”
- 智变·人工智能革新客服行业
- 【Babylon小技巧04】进阶双开门事件绑定同时触发
热门文章
- QT Core | 信号槽03 - 自定义信号与槽
- python mqtt broker_python Mqtt 的安装及使用
- echarts x轴像直尺一样设置刻度_MATLAB作图实例:6:指定轴刻度值和标签
- Wireshark文档阅读笔记-TCP 4 times close解析与实例
- Java笔记-Spring Boot Webservice中对指定namespace及localpart进行拦截
- 前端笔记-Vue中缺少router-view导致跳转失效
- Qt工作笔记-对主事件循环的进一步认识
- HTML期末大作业-小米商城
- java 8 java demo_Java 8 中的 Streams API Demo
- docker mysql数据库初始化_如何在Mysql的Docker容器启动时初始化数据库