elementui使用sync语法糖

1、sync是什么

sync可以用来实现子组件向父组件传递数据,是一种方便的语法糖。

2、实现流程

2.1 父组件(index.vue)

父组件添加关键字:sync

<div @click="dialogVisible = true"></div>
<detail-dialog
 :visible.sync="dialogVisible"
>
	
</detail-dialog>
data(){
    
    
	return {
    
    
		dialogVisible:false,
	},
}

2.2 子组件(DetailDialog.vue)

子组件对要改变值得字段使用this.$emit(“update:字段名称”,val)

<el-dialog
:visable="dialogVisible"
before-close="close"
></el-dialog>

props:{
    
    
dialogVisible:{
    
    
	type:Boolean,
	defaule:false,
},
}
methods:{
    
    
	close(){
    
    
		this.$emit("update:dialogVisible",false);
	},
}

猜你喜欢

转载自blog.csdn.net/ABidMan/article/details/130250785
今日推荐