脚本宝典收集整理的这篇文章主要介绍了vue.js组件通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

由于vue.js拥有多组件的特点，所以其中会涉及到组件之间的通信，在学习vue.js两周当中，通信在整个系统开发是比较重要的，所以我把我两周以来学习到的相关知识给大家分享一下！

相关的知识在官网中查询

这张图用文字表达就是：

1. 父组件向子组件发送信息运用PRops
2. 子组件向父组件发送信息运用emIT

相关实例:

一、父组件向子组件发送信息

操作：当父组件文本框中输入值，子组件接收到的值也会改变，因为使用了双向绑定，如下图所示

子组件接收值：这样就完成了父组件向子组件发送值，props中还有许多操作，比如将传送的类型从数组改为对象，用于限制数据类型等功能

补充：限制数据类型

由于接收值类型应该为Number类型，但是我们传送的是String,所以

二、子组件向父组件发送信息

这个操作与上一个通信方式较复杂一丢丢，首先需要认识一个方法，相关概念查询官网api就可以知道，这里不做太多解释，
其中vm代表的是当前实例，在当前实例当中可以运用this，或者let vm = this

当在子组件中点击emit按钮，就会将文本框的值发送给父组件

根据我个人理解，emit就是绑定一个自定义事件，后一个参数是所需要传送的值

当子组件触发my-event事件，也会触发父组件中result方法

val就是子组件传过来的值：

最终结果：

以上都是个人总结，若有不正确的地方，还请大家多多指教

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js组件通信全部内容，希望文章能够帮你解决vue.js组件通信所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。