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 父组件向子组件传递数据内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- vue做个人页面(vue简易记事本开发详解)
- vuetable表格合并(vue-table实现添加和删除)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- 美国数十万加仑牛奶倒进下水道,世界会重演1929年的大萧条吗(美国数十万加仑牛奶倒进下水道)
- 美国数十万加仑牛奶倒入下水道,贫民区食不果腹,历史再次重演(美国数十万加仑牛奶倒入下水道)
- 美国倒掉数十万加仑牛奶 上热搜第一,这一幕似曾相识(美国倒掉数十万加仑牛奶)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
热门推荐
- js宏任务都有哪些(JavaScript 操作宏任务与微任务)
- 已授权和未授权(提示您未被授权查看该页怎么解决?)
- mysql常见错误提示及解决办法(MYSQL 无法识别中文的永久解决方法)
- 个人组建云服务器(个人云服务器搭建图文教程)
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- MySql存储过程
- 命令行如何使用xampp中的mysql(解决xampp自启动和mysql.sock问题)
- css3设置字体阴影(简单掌握CSS3将文字描边及填充文字颜色的方法)
- php 记录的已读状态(PHP使用观察者模式处理异常信息的方法详解)
- mysql8.0安装版安装详细教程(mysql 8.0.24版本安装配置方法图文教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9