组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系，父子关系、兄弟关系和隔代关系，简化点可以分为父子关系和非父子关系，下面就讲讲vue父子组件通信以及非父子组件通信的方法。使用代码格式会比较乱，所以直接使用图片演示。
1.父子组件
(1).父组件数据传递给子组件
传递
注：这里的child-msg必须用-代替驼峰，否则识别不到方法
接收
方式1
注：接收-改成驼峰
方式2
注：这里可以指定传入的类型，如果类型不对，会警告
方式3
注：指定类型。那我们也可以设置默认值
(2).子组件数据传递给父组件
传递
注：fatherFunc是在父组件中定义的，要和父组件对应上
接收
注：fatherFunc对应子组件中的this.$emit中的
2.非父子
创建空的实例放在根组件下，所有的子组件都能调用
注：这个空的实例，所有的组件都能调用，父子、非父子都可以
传递方
接收方
以上讲的并非全部vue组件数据通信方法，只是我在项目中用到的总结归类，vuex（状态管理）项目用到的比较少，后期用到了，再补充。这样父传子、子传父和非父子组件数据传递就完成了。
获取更多优质内容,请关注【青年码农】
正文完