vue.sync 自定义事件修饰符

面试中会被问到的sync事件修饰符，
下面是事件修饰符的详解，以及实现过程，如何实现子组件对父组件中值进行修改

vue是单项数据流，
当子组件直接修改父组件传递过来的值时，不被认可
所有就有两种处理方式来修改父组件传递过来的值

1.0中支持sync 时间修饰符，2.0中进行删除这个属性，2.3中又将这个加了回来

2.0中支持的写法 

栗子1：使用this.$emit(fn,val)方式修改值
父组件  
<modify-sync :age='age'  @modify='modify'></modify-sync>  

methods:{
    modify(val){
        this.age = val
    }
}

子组件

<template>
  <div>
    <div>
      {{ age }}
    </div>
    <button @click=" modifyAge">修改age的值</button>
  </div>
</template>

props:['age']
methods:{
    modifyAge(val){
        this.$emit('modify',val)
    }
}

实现过程描述：
父组件需要将age传递给子组件 
子组件通过props:['age']接受传递过来的值，并通过{{age}}输出到页面
接下来的操作是通过，子组件中button按钮上绑定的点击事件modifyAge
在调用this.$emit()方法，传入两个值（父组件中自定义的事件名modify，val）
父组件中的modify方法执行，直接使用子组件传回来的val，对age属性进行重新赋值

其实这个时候子组件并不是直接修改我们的父组件传递过去的age值，
只是通过触发父组件中的自定义事件，
让父组件完成值修改的动作，对this.age 进行重新的赋值
赋值完成后新的age值又被传入到子组件中，
子组件接受到新的age值，进行重新的渲染
也就是我们看到的子组件中的age被进行了更新
他还是一个单向的数据流行为

概括
父组件传递值给子组件，子组件要修改父组件传入的值，
通过this.$emit(fn,val)触发父组件上面的方法，通知父组件使用子组件传递过去的val，
对原来的属性age 进行重新赋值



栗子2：sync自定义事件修饰符，出现在子组件要对父组件传递的值进行修改，简化了我们的代码

父组件

<modify-sync :age.sync='age' ></modify-sync>  

子组件
<template>
  <div>
    <div>
      {{ age }}
    </div>
    <button @click=" modifyAge">修改age的值</button>
  </div>
</template>

props:['age']
methosd：{
    modifyAge(){
        this.$emit('updata:age',123123)
    }
}

上面这么写的好处呢？
不用在父组件methods内通过父组件定义一个回调事件，完成属性的重新赋值
methods：{

}

上面这个写法可以进行解构

<modify-sync :age='age' @update:age = 'val => age = val' ></modify-sync>  
:age = 'age'  还是将值绑定到age上 
子组件中用props['age']进行接收

@update 更新属性固定的写法
:age  要被更新的属性
组合起来就变成我们看到的 @update:age (通俗讲法更新某个指定属性)

val => age = val  我们解析一下它，看下面说明：
val 是我们最终要得到的值 并将这个值赋值给age，就是我们看到的 @update:age,  val值它是怎么来的呢？
val => age  val它的值就是这个age的值，age的值是怎么来的呢？
age = val  age的值是通过传入的 val 进行赋值的，那么这个val是怎么传递过来的呢？

通过在子组件中使用 this.$emit('update:age',val) 
表示我们要更新age值

这里update:age 和我们父组件中拆解后的写法update:age就对应上了  
所有vue 就定义了语法糖sycn，将子组件修改父组件值，方法进行了简化，写起来更加简单
直接给传递的属性绑定:age.sycn（sycn是修饰符） 
这么写以后就可以不用向下面这样写了，下面的写法是将传值和修改值进行了分开

<modify-sync :age='age' @update:age = 'val => age = val' ></modify-sync> 
:age 传递子组件 props 接收的属性
@update 固定写法
@update:age 表示要更新age值

两种用法都可以实现修改值，小伙伴在项目中可以任意选用一种，
可能面试的时候会被问到sync事件修饰符，大家可多了解一下实现的过程，以后面试，就不用担心被问到卡壳。

希望对小伙伴理解sycn有帮助 
码字不易，希望点赞
 





复制代码

`