本篇文章给大家带来了关于vue的相关知识，其中主要总结了几种vue中父子组件传递数据的方法，包括了props & event、ref属性、provide & inject等等内容，具有一定的参考价值，下面一起来看一下，希望对大家有帮助。
【相关推荐：vue、vue】
最近在学习vue的源码，总结了几种vue中父子组件传递数据的方法。
1.props & event
父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据，代码如下：
立即学习“前端免费学习笔记（深入）”；
//子组件{{name}}export default{ props:['name'],//or props:{name:{type:String,default:''}} methods:{ //不能在子组件修改props数据，应触发事件让父组件处理 changeName(newName){ this.$emit('changeName',newName) } }} //父组件import childComp from 'path' export default{ data(){ return {name:'XXX'} }, components:{ childComp }, methods:{ changeName(newName){ this.name = newName; } } }
登录后复制
以上就是一个完整的流程，父组件通过props将数据传递给子组件，子组件则触发事件，由父组件监听，并做相应处理。
2.ref
ref属性可定义在子组件或原生DOM上，如果在子组件上，则指向子组件实例，如果在原生DOM上，则指向原生DOM元素（可以用做元素选择，省去querySelector的烦恼）。
传递数据的思路：在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数。代码如下：
//子组件{{parentMsg}}export default{ data(){ return { parentMsg:'' } }, methods:{ getMsg(msg){ this.parentMsg = msg; } }} //父组件import childComp from 'path' export default{ components:{ childComp }, methods:{ sendMsg(){ this.$refs.child.getMsg('Parent Message'); } } }
登录后复制
3.provide & inject 官方不推荐在生产环境使用
provide意为提供，当一个组件通过provide提供了一个数据，那么它的子孙组件就可以使用inject接受注入，从而可以使用祖先组件传递过来的数据。代码如下：
//child{{appName}}export default{ inject:['appName']} // root export default{ data(){ return { appName:'Test' } }, provide:['appName']}
登录后复制
【相关推荐：vue、vue】
以上就是Vue中父组件向子组件传递数据的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3231677.html
