这次给大家带来在vue组件中传递数据步骤详解，在vue组件中传递数据的注意事项有哪些，下面就是实战案例，一起来看一下。
Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况：
父组件向子组件传递数据，通过 props 传递数据。
子组件向父组件传递数据，通过 events 传递数据。
两个同级组件之间传递数据，通过 event bus 传递数据。
一、父组件向子组件传递数据
子组件部分：
{{ msg }}
export default { name: 'child', data(){ return { } }, props: ['msg']
登录后复制
在child.vue中，msg实在data中定义的变量，使用props：[‘msg’]从父组件中获取msg的值
父组件部分：
child
import child from './child.vue'export default { name: 'parent', components: { child }, data () { return { message: 'hello vue' } }}
登录后复制
在调用组件的时候，使用v-bind将msg的值绑定为parent.vue中定义的变量message，这样就能将parent.vue中的message的值传给child.vue了。
单项数据流
当父组件的 message 发生改变，子组件也会自动地更新视图。但是在子组件中，我们不要去修改 prop。如果你必须要修改到这些数据，你可以使用以下方法：
方法一：把 prop 赋值给一个局部变量，然后需要修改的话就修改这个局部变量，而不影响 prop
export default { data(){ return { newMessage: null } }, props: ['message'], created(){ this.newMessage = this.message; }}
登录后复制
方法二：在计算属性中对 prop 进行处理
export default { props: ['message'], computed: { newMessage(){ return this.message + ' 哈哈哈'; } }}
登录后复制
二、子组件向父组件传递数据
子组件主要通过实践传递数据给父组件的
子组件部分：
用户名：
登录后复制
子组件的html中，当input中的值发生改变时，将username传递给parent.vue。
首先声明了一个sendUser方法，用change事件来调用sendUser。
export default { name: 'parend', data () { return { username: '' } }, methods: { sendUser () { this.$emit('changeName', this.username) } }}
登录后复制
在sendUser中，使用$emit来遍历changeName事件，并返回this.name，其中changeName是一个自定义的事件，功能类似于一个中转，this.name将通过这个事件传递给父组件。
父组件部分：
用户名：{{user}}
登录后复制
在父组件中声明了一个getUser方法，用changeName事件调用getUser方法，获取从子组件传递过来的参数username
import child from './child.vue'export default { name: 'parent', components: { child }, data () { return { user: '' } }, methods: { getUser(data) { this.user = data } }}
登录后复制
getUser方法中的参数msg就是从子组件中传递过来的参数uesrname。
三、同级组件间的数据传递
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。
//组件1 //组件2
登录后复制
组件c1中：
page
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.jsexport default { name: 'c1', data () { return { message: 'hi' } }, methods: { changeMsg () { //点击按钮，将this.message传递给c2 bus.$emit('sendMsg', this.message) } }}
登录后复制
组件c2中：
{{msg}}
var Bus = new Vue();export default { name: 'c2', data () { return { msg: '' } }, created () { bus.$on('sendMsg',(data)=>{ //data即为c1组件中的message this.msg = data }) }}
登录后复制
在实际运用中，一般将bus抽离出来：
//Bus.jsimport Vue from 'vue'const Bus = new Vue()expore default Bus
登录后复制
组件调用时引用（import Bus from ‘./Bus.js’）
但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信
实际运用：
将Bus注入到Vue根对象中
import Vue from 'vue'const Bus = new Vue()var app= new Vue({ el:'#app', data:{ Bus } })
登录后复制
在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue使用自定义icon图标步骤解析
Vue2x图片预览插件使用步骤详解
以上就是在vue组件中传递数据步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2760316.html
