技术编程|vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一 ， 而组件实例的作用域是相互独立的 ， 这就意味着不同组件之间的数据无法相互引用 。 一般来说 ， 组件可以有以下几种关系 ， 父子关系、兄弟关系和隔代关系 ， 简化点可以分为父子关系和非父子关系 ， 下面就讲讲vue父子组件通信以及非父子组件通信的方法 。 使用代码格式会比较乱 ， 所以直接使用图片演示 。
1.父子组件
(1).父组件数据传递给子组件
传递
【技术编程|vue父子组件通信以及非父子组件通信的方法】
本文插图
注：这里的child-msg必须用-代替驼峰 ， 否则识别不到方法
接收
方式1
本文插图
注：接收-改成驼峰
方式2
本文插图
注：这里可以指定传入的类型 ， 如果类型不对 ， 会警告
方式3
本文插图
注：指定类型 。 那我们也可以设置默认值
(2).子组件数据传递给父组件
传递
本文插图
注：fatherFunc是在父组件中定义的 ， 要和父组件对应上
接收
本文插图
注：fatherFunc对应子组件中的this.$emit中的
2.非父子
创建空的实例放在根组件下 ， 所有的子组件都能调用
本文插图
注：这个空的实例 ， 所有的组件都能调用 ， 父子、非父子都可以
传递方
本文插图
接收方
本文插图
以上讲的并非全部vue组件数据通信方法 ， 只是我在项目中用到的总结归类 ， vuex（状态管理）项目用到的比较少 ， 后期用到了 ， 再补充 。 这样父传子、子传父和非父子组件数据传递就完成了 。
推荐阅读
- 小龙虾|三农探析：池塘养殖小龙虾如何高产？高产养殖技术全解析
- 大棚蔬菜|早春大棚蔬菜病虫害防治技术要点，老农讲得太实用了
- 松树|松烂皮病的发生规律和防治技术-松树枯梢病防治技术
- 中煤科工集团|中煤科工集团西安研究院研发煤层气（瓦斯）地面抽采新技术
- 航空航天|医学和航空航天跨专业碰撞，胡盛寿院士团队打破pVAD技术海外垄断
- 四川|解码四川科技丨打破国外垄断！这项技术每年救治上万名甲状腺癌患者
- 番茄|每平方米产量达到70公斤？五大技术特点解密荷兰的温室番茄高产原因！
- 芒果|村宝网-芒果抽穗期和开花期怎么管理，芒果开花期技术要点，要注意什么
- 智慧农业|物联网技术如何风驰智慧农业？
- 面部识别技术|无处不在的面部识别技术，究竟“恐怖”在哪里？