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左右滑动切换(vue实现界面滑动效果)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- vue手动清除keepalive缓存(vue中keep-alive组件的用法示例)
- vue-router底层实现原理(vue-router history模式服务器端配置过程记录)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
热门推荐
- python撤回的微信消息怎么看(Python实现微信消息防撤回功能的实例代码)
- 云服务器如何搭建自己的网站(云服务器架设搭建的流程步骤是什么?)
- apache的安装步骤(windows安装apache系统中无apache2服务解决方案)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- 织梦后台常见问题(登录织梦后台提示用户名不存在的解决方法介绍)
- 云服务器好在哪你知道吗(美国云服务器怎么选择?美国云服务器选择技巧分享)
- 阿里云服务器购买时考虑的因素(购买阿里云服务器后的基本安全配置)
- textarea 高度自适应
- docker数据卷挂载和共享目录挂载区别(Docker容器中挂载NFS共享目录的实现)
- cuda安装包下载慢(Manjaro安装CUDA实现教程解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9