vue-element-ui子组件使用update修改从父组件传过来的变量同时响应更新

我们都知道子组件直接修改父组件传过来的值的话控制台会报错,一般的做法是通过$emit(‘自定义属性名’,value)来实现修改

这里我们使用另外一种方法:

例如:
我们需要当点击某项操作后刷新表格,需要改变表格loading的状态,
直接修改控制台肯定是会报错的

这个时候我们就需要在父组件中在自定义属性名后加上.sync修饰符

父组件
<children :loading.sync="loading"></children>

然后在子组件中加上update属性就可以实现父组件和子组件同时响应变化

子组件
this.$emit('update:loading',true)
this.$api...
.then(res => {
	this.$emit('update:loading',false)  /成功调用接口后关闭loading
})

这样就修改成功了,同时控制台也不会报错,父组件和子组件也是同时更新的