41. Vue组件传值-父组件向子组件传值
前言
前面写了组件的创建、切换等等篇章,主要讲述了组件自身如何在父组件app
中如何渲染使用。这里存在一个问题,就是父组件的数据如何传递到子组件中。
这是一个很常见的情况,如果是jQuery
那么都是直接传参数就是了,而在Vue
框架中,这里就要使用子组件中props
属性来处理了。
官网介绍props
地址:https://cn.vuejs.org/v2/guide/components-props.html
那么下面来看看一个父组件向子组件传值的示例。
示例:使用props传静态值
1.首先编写一个组件以及父组件,展示基本的信息
首先浏览器展示看看组件渲染情况,如下:
2.尝试在子组件直接使用父组件的msg
,看看能否显示出数据来
浏览器显示如下:
那么该如何使用呢?
换一个思考的方式,在app
父组件中是可以使用v-bind
方法来设置绑定值的,能否通过v-bind
来绑定msg
到子组件中呢?
3.在父组件中使用 v-bind
来绑定msg
到子组件中,进行传值
通过v-bind
将父组件的msg
绑定传递到子组件的parentmsg
中,下面来看看浏览器是否正常显示,如下:
可以从错误提示看到,使用v-bind
的传递值都是要在子组件进行定义的,不能直接使用。那么是不是在子组件的data
中进行定义呢?
当然不是,子组件有一个特殊的属性props
,专门用来定义父组件传递下来的参数,并且传递下来的参数只能是只读。
4.使用props
定义父组件传递下来的值
浏览器显示如下:
显示已经可以正常显示父组件中,传递下来的值了。那么下面来看看,使用props
定义的值,能否被修改。
5.修改props
定义的值,查看是否会报错
浏览器点击之后,如下:
告警信息如下:
vue.js:634 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "parentmsg"found in--->
可以从告警信息看出,的确props
定义的值在Vue
框架是不需要修改的,只能是只读。
那么反过头来看,子组件中可读可写的数据只有是data
定义出来的值才可以。
更多精彩原创Devops文章,快来关注我的Devops社群吧:
http://www.taodudu.cc/news/show-6264946.html
相关文章:
- vue 2 组件之间传值
- Vue2 组件传值
- vue3.0 组件传值
- Vue2 组件之间传值
- vue父子组件传值:详解父组件向子组件传值(props)
- Vue2组件传参
- vue2组件传值
- VUE2 组件间传值
- vue 组件传值
- VUE3.0——组件传值
- Vue组件传值——兄弟组件传值
- 项目实训——2022
- 暑期项目实训——08
- 2022暑期项目实训(一)
- 《实训一》
- 项目实训2022
- 项目实训(一)
- 一、实训概况
- 实训周一
- 2022暑期项目实训(二)
- 暑期实训(1)
- 实训周日
- 项目实训_2022
- 项目实训第一周2-学习系统的使用
- 实训日报8
- 暑期实训二20220621
- 项目综合实训
- 信息安全实训系统php源码,实训平台
- 项目实训(完成)
- java实训小项目6_实训项目
41. Vue组件传值-父组件向子组件传值相关推荐
- vue 组件之间传值 父转子,子传父,同级别之间的传参,跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
- vue 组件间的通信,子组件向父组件传值的方式总结
写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面的组件如何通信.一般来说在vue的数据传递是在父组件传子组件通过属性来传,子 ...
- 四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽
一.父子组件的通信 在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
- vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例 模仿v-model实现案例 我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例 这是父组件的东西.利用这个框改变值,看看有没 ...
- vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- 【Vue开发实战课后题】子组件为何不可以修改父组件传递的props?
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的. 一.为何不可以修改伏组件传递的Prop? 因为Vue是单向数据流,为了保证数据的单 ...
- vue 关于父组件同时多次调用子组件而产生的 this取值 的bug问题
vue 关于父组件同时多次调用子组件而产生的 this取值 的bug问题 我们在开发vue项目的使用,会经常使用this这个关键字,this指向vue这个实例,我们可以使用this.来获取data里面 ...
- vue中el-dialog弹窗关闭,子组件控制父组件
1.父组件页面中的点击事件控制子组件的弹窗出现 2.子组件页面有个叉叉,点了之后关闭当前页面 <div class="databtn" @click="record ...
- vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后,传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
- 【Android TV 开发】焦点处理 ( 父容器与子组件焦点获取关系处理 | 不同电视设备上的兼容问题 | 触摸获取焦点 | 按键获取焦点 )
Android TV 开发系列文章目录 [Android TV 开发]安卓电视调试 ( 开启网络远程调试 ) [Android TV 开发]焦点处理 ( 父容器与子组件焦点获取关系处理 | 不同电视设 ...
最新文章
- 如何建立java ssm工程_如何搭建一个ssm项目
- vmware centos 7 更新vmware-tools
- html访问手机相册,使用HTML5的FileReader读取手机图片(还可选择拍照), 并自动异步上传到服务器上...
- python实现选择文件_python3实现文件选择对话框
- 简易有WEB文件服务器,Python实现简易版的Web服务器(推荐).pdf
- 招贤纳士|360WEB平台云平台部招人啦
- 这类程序员成为百度、阿里宠儿,分分钟秒杀众应届毕业生
- database design three form
- python数值运算函数代码_Python如何计算列表中所有数字的乘积?(代码示例)
- linux查看网卡百兆还是千兆网卡,linux下如何看网卡是千兆还是百兆的?
- linux绕过内存写保护,TF卡写保护解决案例教程
- -- 自古多情空余恨~~~~
- python3d动画控制_3D旋转玫瑰花:python-matplotlib实现
- canvas火焰效果
- 域用户指定计算机,什么是AD域,如何设置AD域用户仅登录到指定的计算机
- 傻瓜攻略(六)——MATLAB实现RBF神经网络
- 9. 【gRPC系列学习】连接失败处理:backoff协议
- python头像变二维码_学了Python之后,美化二维码如此简单
- 电影案例[求平均分,评分最高的N条记录,.每部电影的点击次数(求热门)]
- 汇编 - 环境设置(Environment Setup)