vue的父子传值之“.sync“

写在前边的东西：这个文档，是需要有vue父子传值基础

.sync

本质：是一个语法糖，简化了父子传值（具体来讲，是简化父组件传值写法）。
效果：不用父组件写自定义监听事件，便可以使子组件修改父组件的值

• 格式：子组件传递给父组件值的格式：this.$emit(‘update:aaa’,值)
  • update+冒号是必须写的，后面跟的 aaa 是父组件传来的值的名称
  • 第二个值便是传递给父组件的值

父组件中的传递值写法

 <组件名 :aaa.sync="bcc"/>

举例：

<text-document
 v-bind:title="doc.title"
 v-on:update:title="doc.title = $event"
></text-document>

简化后：

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

总体简化了一个v-on及对应的监听事件

子组件里边要做改变

// 原来的写法
this.$emit('事件名',值)
//  现在的写法
 this.$('update:父组件传来的值', 值)

用jsx写vue组件，监听.sync修饰符的事件

<!-- 常规 -->
<el-dialog title="标题" :visible.sync="open" width="200px" append-to-body ></el-dialog>
<!-- 改写 -->
<el-dialog title="标题" on={{ 'update:visible': () =>(this.open=false)}} visible={this.open} width="200px" append-to-body ></el-dialog>