1、父组件向子组件传值
2、子组件向父组件传值
3、父组件调用子组件方法
4、子组件调用父组件方法
5、平级组件间通信
最佳解决方案
1、父组件向子组件传值
通过属性传值,引入子组件,绑定属性 :
属性名 或 v-bind:
属性名,子组件通过props
接收传递过来的值
2、子组件向父组件传值
通过 this.$emit
将事件和参数传递给父组件
3、父组件调用子组件方法
(a):给子组件加一个ref
引用,父组件通过this.$refs
即可找到该子组件,也可以操作子组件的方法:this.$refs.ref名.子组件方法
;
(b): 通过$children
,可以获 取到所有子组件的集合:this.children[0].方法
4、子组件调用父组件方法
通过$parent
可以找到父组件,进而调用其方法:this.$parent.父组件方法
5、平级组件间通信
(a): 创建一个公共文件eventBus.js
,只是创建一个空的vue
实例 export default new Vue()
;通过eventBus.$emit()
传递事件和参数,通过eventBus.$on()
接收事件和参数。
(b): 使用vuex