vue父子组件通信常见问题及技巧

父组件往子组件传递数值。子组件监听变化渲染。

父组件：

<template>
	<all-parameter :define="parameterDefine" v-model="provider.parameter" v-on:regionChange="regionChange"></all-parameter>
</template>

<script>
import allParameter from '../component/allParameter';
import Vue from 'vue';

export default {
	//组件注册
	components: {
		allParameter,parameterSelect,parameterString
	},
	//变量
	data(){
		return {
			parameterDefine:[];
		}
	},
	method:{

		paramChange(param){
			let tempParameterDefine = param;
			Vue.set(this,"parameterDefine" ,tempParameterDefine );//（1、）第一次赋值。子组件渲染
			this.$http.get().then(response =>{
				tempParameterDefine.option=response.body.data;//改变的是对象的某个属性值。
				Vue.set(this,"parameterDefine" ,tempParameterDefine );//（2、）第二次赋值。子组件渲染？？？？？？？
			})
		}
	}

}
</script>

子组件：

//子组件通过props来接收数据: 
props: {
    define:{type:"Object" , default:{}},
 },
//监听define变化
watch:{
       define(define, olddefine) {
       reload(define);
}
//通用方法
method:{
	reload(define);
}

常见问题：

1、JavaScript对象赋值，赋值的引用。

父组件中，1,2位置，tempParameterDefine 的改变，是tempParameterDefine指向的那块内存的值变了。但是引用没有变。传递到自组件表现为没有变化。所以自组件没有渲染。

归根节点还是JavaScript基础问题：我在做这块的时候，忽略了这个问题呢，结果晕了好一会儿。

解决：先Vue.set(this , "parameterDefine" , {})。让他变一下。

paramChange(param){
			let tempParameterDefine = param;
			Vue.set(this,"parameterDefine" ,tempParameterDefine );//（1、）第一次赋值。自组件渲染
			this.$http.get().then(response =>{
				tempParameterDefine.option=response.body.data;//改变的是对象的某个属性值。
				Vue.set(this , "parameterDefine" , {})//让他变一下
				Vue.set(this,"parameterDefine" ,tempParameterDefine );//（2、）第二次赋值。自组件重新渲染
			})
		}

2、父组件里调用子组件的方法。

父组件：在子组件上加上 ref. 在父组件的方法中，通过this.$refs.child.reload();调用子组件的 reload方法。

<template>
	<all-parameter :define="parameterDefine" v-model="provider.parameter" ref="child"></all-parameter>
</template>