技术编程vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一 ， 而组件实例的作用域是相互独立的 ， 这就意味着不同组件之间的数据无法相互引用 。 一般来说 ， 组件可以有以下几种关系 ， 父子关系、兄弟关系和隔代关系 ， 简化点可以分为父子关系和非父子关系 ， 下面就讲讲vue父子组件通信以及非父子组件通信的方法 。 使用代码格式会比较乱 ， 所以直接使用图片演示 。
1.父子组件
(1).父组件数据传递给子组件
传递
本文插图
注：这里的child-msg必须用-代替驼峰 ， 否则识别不到方法
接收
方式1
本文插图
注：接收-改成驼峰
【技术编程vue父子组件通信以及非父子组件通信的方法】方式2
本文插图
注：这里可以指定传入的类型 ， 如果类型不对 ， 会警告
方式3
本文插图
注：指定类型 。 那我们也可以设置默认值
(2).子组件数据传递给父组件
传递
本文插图
注：fatherFunc是在父组件中定义的 ， 要和父组件对应上
接收
本文插图
注：fatherFunc对应子组件中的this.$emit中的
2.非父子
创建空的实例放在根组件下 ， 所有的子组件都能调用
本文插图
注：这个空的实例 ， 所有的组件都能调用 ， 父子、非父子都可以
传递方
本文插图
接收方
本文插图
以上讲的并非全部vue组件数据通信方法 ， 只是我在项目中用到的总结归类 ， vuex（状态管理）项目用到的比较少 ， 后期用到了 ， 再补充 。 这样父传子、子传父和非父子组件数据传递就完成了 。
推荐阅读
![[利刃军事]应集体染病以获得“群体免疫”，美国专家：中国周边的美军不能隔离](https://imgcdn.toutiaoyule.com/20200406/20200406152405377637a_t.jpeg)
- 烹饪|锡纸烧烤技术，三款酱料配方是关键，制作好酱料锡纸类菜品轻松做
- 芯片|我国开始技术封锁！除量子密码以外，还有一项让美国憋屈十几年
- 上海嘉定|一项专利技术使车库车位增多10%，开发商们要坐不住了
- 上海市科学技术委员会|关于做好制订因公出国（境）培训中期规划的补充通知
- 闲情居|华为云手机发布，真正的5G手机，绕过光刻机的技术壁垒
- 一味宠爱|最全盘点卡中国脖子的35项技术，折射中国工业水平的真实现状
- 映璇汽车工作室|终于知道它为啥难卖了，看完长城WEY内部技术团队做的竞品分析
- Java|计算机专业的本科生，该选择学习Java技术体系还是.NET技术体系
- 人员|计划到期！立昂技术：部分董事、高管人员累计减持约47万股
- 南方PLUS|高新区面向全市征集30项以上技术需求，@佛山企业