vue 父子组件之间通信

这是个老生常谈的问题了,但在实际开发中总会遇到,特此整理一下相关内容,以备后用

1. 父传子

父组件中引入子组件,变量使用:modalType绑定,其中isedit是父组件data中定义的值,可以是静态的也可以是动态的

<distribution-modal :modalType="isedit" ></distribution-modal>

子组件中使用props接收,type不确定时使用null来定义任意类型,props也可以是个数组

props:{
   	modalType:{
   		type: null,
   	    default: false
   	}
}
或者
props:[“modalType”]

子组件中通过this.modalType来接收
一般动态传值之后会出现父组件值已经更新,但是子组件没有更新的情况,这个时候我们需要在子组件中的watch方法来监测值的变化

watch: {
	modalType: function(newVal,oldVal){
       //在此处处理值变化之后的操作,newVal即改变后的值
     },
}

2. 子传父

引入的子组件上绑定方法

<distribution-modal @change="changeEdit"></distribution-modal>

父组件methods中定义changeEdit方法来接收子组件传过来的值

methods: {
	changeEdit(editStu){
    	//此处的editStu即是子组件传过来的值.在此方法内进行后续操作
    },
}

子组件通过$emit的方法来传值

this.$emit('change', "值");

…
结束