vue用公共组件页面传值_VUE 组件传值的三种方式 （组件不是页面）

一  父组件－－>子组件  ：

1.1 通过子组件的属性传值给子组件：

1)、 在父组件中直接赋值

2)、 在子组件中定义属性： props{ name:String ,sex:String }

1.2 通过引用子组件的方法传：

1)、父亲组件

this.$refs.child1.childMethod(this.flag);

2)、子组件中定义方法： childMethod(value)

二、子组件－－－〉父组件：

子组件给父组件传值：

1) 父 ,通过回调函数func(value)的参数value接受

2) this.$emit('func4child', ‘test’)

三、无父子关系的组件：

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

1)  定义公共部分 //bus.js

import Vue from 'vue'

export default new Vue()

2) A 组件引用

import Bus from './bus.js'

A中发出事件

Bus.$emit('val', this.elementValue)

3)组件B：接收

import Bus from './bus.js'