Vue创建三:组件间bus传值

业务中遇到一个复杂的表单页,分割成细小的组件

 

 

当InputItem.vue输入框值改变时,需要更改Form.vue中formVal对象的值,此处使用了bus,当组件3中的值发生变化时,bus提交changedFormObject事件,然后在组件1中处理事件,以此来实现组件间的传值。

1、创建Bus.js

import Vue from 'vue'

const Bus = new Vue();

export default Bus

2、组件1和组件3引入Bus

//组件1
import Bus from '@/Bus'
...
mounted () {
		Bus.$on('changedFormObject',(name,val) =>{//处理传过来的值
			this.formVal[name] = val;
		});
	}

//组件3
<input type="text" class="form-input" v-model="inputValue" >
     import Bus from '@/Bus'
	export default {
		name: "InputItem",
		props: {
			label_name: String,
			input_val: String,
			input_name: String
		},
		data () {
			return {
				inputValue: this.input_val//不要直接修改父组件传过来的参数,参数是单向传递的,只能由父组件传到子组件。先将参数赋值给子组件的data,然后再做修改
			}			
		},
		watch: {
			inputValue () {
				console.log(this.inputValue);
				Bus.$emit('changedFormObject',this.input_name,this.inputValue);//提交改变后的值
			}
		}
	}

  

 

 

  

 

posted @ 2018-06-25 16:56  Youngly  阅读(3469)  评论(0编辑  收藏