今天在使用Vue进行父子组件传值的时候，需要父组件向子组件传值，同时子组件需要关闭父组件的弹窗，这就需要父子组件的双向绑定。这里我用到了.sync修饰符(在Vue2.3之后的.sync只是编译时的语法糖)
语法糖：语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言：操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。好处：使用语法糖，让我们写的代码更简单，看起来也更容易理解
语法糖是语言中的一个构件，当去掉该构件后，并不影响语言的功能和表达能力。
简而言之，语法糖是一种便捷写法
官网介绍：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
先上代码
//父组件
<el-dialog title="修改科室信息" :visible.sync="dialogFormVisible">
<dep-edit :department="department" :visible.sync="dialogFormVisible" @select="select"></dep-edit>
</el-dialog>
data() {
return {
dialogFormVisible:false,
department:{},
};
},
methods: {
select() {
//略
}
}
//子组件
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="update">修改</el-button>
</div>
props: {
department: {
type: Object,
default: {}
},
},
methods: {
close(){
this.$emit('update:visible', false)
},
update(){
this.$emit('select')
this.$emit('update:visible', false)
},
}
效果图
image.png
这里我用到了单向数据传递(department)、事件传递(select、visible)
1、数据传递
当你要从父组件向子组件传递数据时，在父组件中用 :department="department" 将数据传递到子组件，在子组件中用props接收该属性，即可在子组件中使用该属性数据。
2、数据传递 事件绑定=“双向绑定” .sync
在上面的代码中，我需要在子组件中改变父组件的dialogFormVisible属性的值，用于控制弹窗的关闭。
这里在父组件中使用 .sync
:visible.sync="dialogFormVisible"
上面说到，.sync只是编译时的语法糖，即编译时该写法会被扩展为
v-bind:visible="dialogFormVisible" v-on:update:visible="val=>dialogFormVisible=val"
前一个式子将数据传递给子组件，后一个式子绑定事件到组件。
这里我在子组件中没用到visible，所以就没用props接收。所以实际上我只用到了后面的事件。
然后在子组件中使用emit触发当前实例上的事件，附加参数都会传给监听器回调。
this.$emit('update:visible', false)
可以看到，我们触发的是update:visible，也就是扩展之后的事件，会将dialogFormVisible的值改变为false。
3、事件绑定
可以看到我在父组件使用子组件时写了个@select="select"（即v-on:select="select"），然后在子组件中使用this.$emit('select')即可触发该事件，与使用.sync是一样的，只不过我这里没有带参数(感兴趣的朋友可以试试带参数的写法)。
到此，正文结束。
写在后面，为了加深印象，我又试了el-dialog的visible.sync，这个是element的el-dialog组件提供的Attributes
https://img2020.cnblogs.com/blog/1442109/202005/1442109-20200507104408556-1203942101.png
虽然我把我的子组件的属性名也定义为visible，但是他们两者之间是没有直接关系的，如果把el-dialog的.sync修饰符去掉，会发现点击对话框右上角的X是关不掉对话框的，就是因为dialog组件无法操作父组件的visible绑定的元素。
网友评论