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