这期内容当中小编将会给大家带来有关Vue中怎么实现组件间数据通信，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
一、 父组件 => 子组件
在上一章的时候，我们有提到过，我们可以使用 prop 选项在组件中定义一些自定义特性，当有值传递给 prop 特性时，那个 prop 特性就变成了那个组件实例的一个属性，此时我们就可以从组件上获取到接收的值。因此，这里我们就可以在使用子组件时通过 v-bind 指令动态的绑定一个 prop 特性，从而接收到父组件传递的值。
可以看到，在下面的示例代码中，我们在子组件中通过 v-bind 指令绑定了一个 prop 特性 parenttitle，用来接收父组件 data 选项中的 title 属性，之后通过 watch 监听属性监听绑定的 parenttitle 属性，从而同步更新子组件 data 选项中的 content 属性值。
1234567891011121314151617181920212223242526272829303132333435363738394041424344 | <body> <div id="app"> <h5> 请输入需要传递给子组件的值：<input type="text" v-model="title" /> </h5> <hr /> <child-node v-bind:parenttitle="title"></child-node> </div></body><template id="child"> <div> <h5> Vue 实例中的属性值为：{{content}} </h5> </div></template><script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, } } })</script> |
二、 子组件 => 父组件
在 Vue 中存在着一个单向的下行绑定，父级组件的数据变更可以影响到子集组件，反过来则不行。在实际开发中可能会遇到当子组件的数据更新后，需要同步更新父组件的情况，那么这时我们应该怎么做呢？
既然没办法直接通过修改 prop 选项中的属性进行更新父组件，不如让我们换一个思路思考。我们想要实现的效果，无非是当子组件数据变更时能够同步引起父组件的变更，那么，我们是不是可以在子组件数据发生变化后，触发一个事件方法，告诉父组件我数据更新了，父组件只需要监听这个事件，当捕获到这个事件运行后，再对父组件的数据进行同步变更不就可以了，整个的示意流程如下。
那么，如何才能实现事件监听呢？
嗯，Vue 已经帮我们实现好了解决方案。我们可以使用 v-on 事件监听器监听事件，通过 $emit 去触发当前实例上的事件。当然，这里的事件可以是 Javascript 中的原生 DOM 事件，也可以是我们自定义的事件。
例如，在下面的代码中，当我点击传递数据按钮后，触发了子组件的 func 方法，在 func 方法中触发了子组件实例上的 show 事件，并把 input 框中的值作为参数进行传递。这时，我们在使用到子组件的地方就可以通过 v-on(@) 指令监听这个 show 事件，从而获取到传递的参数，并触发父组件的监听事件。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 | <body> <div id="app"> <h5> 子组件中的属性值为：{{msg}} </h5> <hr /> <child-node @show="showMsg"></child-node> </div></body><template id="child"> <div> <h5> 请输入需要传递给父组件的值：<input v-model="childMsg" type="text" /> <button @click="func">传递数据</button> </h5> </div></template><script> var vm = new Vue({ el: '#app', data: { title: '', msg: '', }, methods: { showMsg(data) { this.msg = data } }, components: { 'childNode': { template: '#child', data() { return { childMsg: '' } } methods: { func() { this.$emit('show', this.childMsg) } }, } } })</script> |
上述就是小编为大家分享的Vue中怎么实现组件间数据通信了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4869148/blog/4908611
计算
安全
数据库
网络和加速
企业服务
