vue中的.sync修饰符用法

在项目中接触到父组件传值给子组件的时候，想在子组件改变父组件传的值。（比如用于弹窗关闭）

但是正常来说，vue2是不允许子组件直接改父组件传进去的值的。

所以我们需要在子组件内定义自定义事件，通知父组件需要改值了。

一般情况下都是通过父组件传值给子组件 然后子组件自定义事件来通知父组件更新值。

//父组件

      <div class="imChat fadeIn" v-show="imChat" ref="imChat">

          <trsIm :imChat="imChat" @dialogVisibleEvent="showIm"></trsIm>

      </div>

//父组件方法

  showIm(imchat) {

                this.imChat = imchat;

            },

  //data中

　imChat: false

//子组件中定义
props: {
    imChat: Boolean
}
//调用自定义方法更改外部父组件的值
  closeIm(){
            this.$emit('dialogVisibleEvent', false);
        }

那么使用sync修饰符，就是简化了这一过程,
父组件直接这么写就行了，子组件还是需要触发的

例如 父组件传值给子组件 子组件修改这一值

//父组件
data () {
        return {
          sth: '传入子组件的值'
        }
    },

<template>

  <all-class-hour :sth.sync="sth"/> 

 </template>

//子组件props定义
props: {
        sth: {
        type: String,
        required: true
        }
    }
//在template使用
<span>{{ sth }} </span>

//将sth传入子组件结果为

 

 

//在子组件调用自定义方法修改该值
mounted () {
        console.log(this.$emit('update:sth', '通过这个改变父组件的值'))
    }

//结果为

发现已经成功修改父组件的值！！

这里注意我们的事件名称被换成了update:age
update：是被固定的也就是vue为我们约定好的名称部分
age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来

这样就完成了，是不是感觉简单了很多。

注意事项：
这里我们必须在事件执行名称前加上update：的前缀才能正确触发事件。

总而言之

它主要的作用就是在修改外部参数的例子当中，作为参数回传值的语句的简写版，让这段常用代码，变得简洁而易用。

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。