Vue:.sync 修饰符:对 props 进行“双向绑定”

标签: Vue


问题:

在 Vue 文档中可以知道,子组件想要改变父组件的数据,必须在子组件使用 this.$emit('事件名', data) 来向父组件传递数据,父组件在组件标签上使用 @时件名.native='onSubmit' 来触发事件,获取子组件传递过来的值。

但是,在 element-ui 使用过程中,发现 el-dialog 组件,不用在组件标签上创建自定义事件,就可以改变父组件值。

简而言之: 子组件可以直接改变父组件传递过来的 prop 值。


父组件:
绑定一个 title 属性,并添加 .sync 修饰符

<text-document v-bind:title.sync="doc.title"></text-document>

子组件:
触发 emit 方法,必须加上 update: 关键词,可以将 $emit 传递给父组件的值,替换成对应的绑定值。
本例中,子组件newTitle 赋值给父组件title

this.$emit('update:title', newTitle)

注意事项:

.sync 修饰符不允许传入表达式,比如:
<text-document v-bind:title.sync="doc.title + 'hello'"></text-document>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容