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);//提交改变后的值
			}
		}
	}

　　

 

 

　　

 

转载于:https://www.cnblogs.com/Youngly/p/9225095.html