VUE 组件传值的三种方式 （组件不是页面）

一  父组件－－>子组件  ：

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

1）、 在父组件中直接赋值 <child :name="张三" :sex="李四"></child>
2）、 在子组件中定义属性： props{ name:String ,sex:String }

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

1）、父亲组件
<children ref="child1"></children>
this.$refs.child1.childMethod(this.flag);
2）、子组件中定义方法： childMethod(value)

 

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

子组件给父组件传值：

1） 父 <child v-on:func4child="func"></child> ,通过回调函数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'