vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
类别:编程学习 浏览量:1434
时间:2022-03-29 16:13:01 vue 父组件向子组件传值几种方法
Vue中父组件向子组件传递数据的几种方法最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法。
1.props & event父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下:
//子组件 <template> <li @click="changeName('YYY')">{{name}}</li> </template> <script> export default{ props:['name'],//or props:{name:{type:String,default:''}} methods:{ //不能在子组件修改props数据,应触发事件让父组件处理 changeName(newName){ this.$emit('changeName',newName) } } } </script> //父组件 <template> <li> <child-comp :name="name" @changeName="changeName"></child-comp> </li> </template> <script> import childComp from 'path' export default{ data(){ return {name:'XXX'} }, components:{ childComp }, methods:{ changeName(newName){ this.name = newName; } } } </scritp>
以上就是一个完整的流程,父组件通过props将数据传递给子组件,子组件则触发事件,由父组件监听,并做相应处理。
2.refref属性可定义在子组件或原生DOM上,如果在子组件上,则指向子组件实例,如果在原生DOM上,则指向原生DOM元素(可以用做元素选择,省去querySelector的烦恼)。
传递数据的思路:在父组件内通过ref获取子组件实例,然后调用子组件方法,并传递相关数据作为参数。代码如下:
//子组件 <template> <li>{{parentMsg}}</li> </template> <script> export default{ data(){ return { parentMsg:'' } }, methods:{ getMsg(msg){ this.parentMsg = msg; } } } </script> //父组件 <template> <li> <child-comp ref="child"></child-comp> <button @click="sendMsg">SEND MESSAGE</button> </li> </template> <script> import childComp from 'path' export default{ components:{ childComp }, methods:{ sendMsg(){ this.$refs.child.getMsg('Parent Message'); } } } </scritp>
provide意为提供,当一个组件通过provide提供了一个数据,那么它的子孙组件就可以使用inject接受注入,从而可以使用祖先组件传递过来的数据。代码如下:
//child <template> <li>{{appName}}</li> </template> <script> export default{ inject:['appName'] } </script> // root export default{ data(){ return { appName:'Test' } }, provide:['appName'] }
vue官方推荐的全局状态管理插件。不细说。
到此这篇关于Vue中父组件向子组件传递数据的几种方法的文章就介绍到这了,更多相关Vue 父组件向子组件传递数据内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue-router底层实现原理(vue-router history模式服务器端配置过程记录)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue源码系列教程(vue使用引用库中的方法附源码)
- vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- springboot vue 异地登录(vue+springboot实现登录验证码)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue在html里面怎么展示图片(v-html渲染组件问题)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue是怎样进行页面跳转(Vue实现登陆跳转)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- 每天都吃水果的好处(每天吃水果的好处与功效)
- 苹果15价格(苹果15价格512g官网)
- 春节放假几天(春节放假几天2023法定几天)
- 今天 3月13日,31年前,一个英雄少年感动了中国(今天3月13日31年前)
- 你好,新成理人丨成都理工大学2019级新生开学典礼隆重举行(新成理人丨成都理工大学2019级新生开学典礼隆重举行)
- 这部民警编演的红色话剧,讲述了一个不断追寻的故事(这部民警编演的红色话剧)
热门推荐
- css圆角边框设置教程(css效果之边框内圆角)
- SQLite数据类型
- thinkphp5配置入口路径(ThinkPHP5.1框架数据库链接和增删改查操作示例)
- python为什么使用logging(python中logging模块的一些简单用法的使用)
- cssgrid普及情况(5分钟教你学会 CSS Grid 布局)
- django settings配置(Django重置migrations文件的方法步骤)
- dedecms默认水印(DEDECMS显示英文日期时间的方法)
- nginx为什么要配置https(Nginx配置Https安全认证的实现)
- python使用telnet(python 处理telnet返回的More,以及get想要的那个参数方法)
- mysql错误代码之1064的解决方案(mysql错误代码之1064的解决方案)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9