跳至主要內容

Vue中emit 与.sync的用法

三思原创大约 1 分钟前端vue前端vuejs

介绍了在Vue项目中使用this.$emit('update:xx', value)和xx.sync的用法,以及说明了props单向数据流特点。通过示例展示父子组件传值的方法,包括通过$emit事件向父组件传递值和使用.sync语法糖简化代码实现相同效果。

image
image

Vue中this.$emit(“update:xx“,value)和xx.sync的用法

vue项目open in new window中,正常父子组件传值使用props属性,而且要注意props的单向数据流特点,也即父组件通过props向子组件传值,但子组件不能直接改props里面的值,正常的做法一般是通过$emit向父组件发射一个事件,然后传值,达到子组件想要修改父组件值的目的.vue在后面的版本为了简化写法,推出了.sync的语法糖写法,代码更简洁,达到的效果是一样的]/

<my-upload field="headImg"
               @crop-upload-success="cropUploadSuccess"
                :modelValue.sync="uploadHeaderImg.show"
               ref="myUpload"
               langType="zh"
    />