本篇文章给大家带来的内容是关于vue的传值方式有哪些？vue中常用的传值方式介绍（3种），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一. 父组件向子组件传值
1. 使用props建立数据通道的渠道
// 这是父组件// 这是子组件
登录后复制
2 . 在子组件中通过props传递过来的数据
Vue,component('child',{ props:['message'] })
登录后复制
二. 子组件向父组件传值
1. 子组件中需要一个点击事件触发一个自定义事件
Vue.component('child',{ methods:{ handleClick(){ // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数 this.$emit('parentClick',123) } }, template:` 这是子组件
`})
登录后复制
2.在父组件中的子标签监听该自定义事件得到传递的值
Vue.component('parent', { data() { return { msg: '我是子组件' } }, methods: { receiveMsg(value) { console.log(value) this.msg = value } }, template:' 这是子组件
接收子组件传过来的值{{msg}}
'})
登录后复制
三. 非父子组件传值
有时候两个组件也需要传值(非父子关系),所以我们需要一个公共的vue来进行传递值和获取值
1 . 创建一个空的vue
立即学习“前端免费学习笔记（深入）”；
// 创建一个空的公共的vue对象 var bus = new Vue();
登录后复制
2 . 在组件1中,定义$emit来发送数据
bus.$emit('test','数据')
登录后复制
3 . 在组件2中使用$on来接收传递的数据
bus.$on('test', function(num) { this.msg= num; //事件的解绑问题 bus.$off("test") })
登录后复制
当然非父子传值的方法不只有一种我们也可以使用 localstorage 来传值和取值
// 在第一个组件中 setItem 设置值localstorage.setItem('test','数据')// 在第二个组件中 getItem 获取值localStorage.getItem("test");
登录后复制
相关推荐：
vue组件之间的传值方式
vue组件之间的传值方式
以上就是vue的传值方式有哪些？vue中常用的传值方式介绍（3种）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2742810.html
