elementui使用sync语法糖

最新推荐文章于 2024-06-17 16:23:51 发布

原创最新推荐文章于 2024-06-17 16:23:51 发布 · 753 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#elementui #javascript #css

收录于

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue.js中.sync修饰符的用途，它用于简化子组件向父组件的数据传递。在父组件中，通过.sync绑定属性，而在子组件内部，使用this.$emit(update:属性名,值)来更新从父组件接收到的值，关闭对话框的例子展示了这一过程。

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);
	},
}