VUE中的修饰符.sync

VUE中的修饰符.sync

看了vue官网对修饰符.sync的的解释 依然一脸懵逼o((⊙﹏⊙))o，于是乎就深入学习了一下，做个记录 ，以后多多使用。

官网是这么说的：在有些情况下，我们可能需要对一个 prop
进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。于是乎 官方推荐以 update:myPropName 的模式触发事件取而代之。

首先 我们通过父组件的按钮来让子组件显示出来

父组件代码

<template>
 <div>
   <button @click="show">我是父组件中的按钮</button>
   <child v-show="isshow"></child>
 </div>
</template>

<script>
import child from '@/components/child'
 export default {
   data () {
     return {
       isshow: false
     }
   },
   components: {
     child
   },
   methods: {
     show() {
       this.isshow = true
     }
   }
 }
</script>

<style>
</style>

子组件代码

<div class="bgtest">我是子组件</div>

接着我们在子组件中添加一个按钮，通过这个按钮，将自己隐藏起来，此时就需要子组件向父组件传值了，如图：

父组件代码

<template>
 <div>
   <button @click="show">我是父组件中的按钮</button>
   <child v-show="isshow" @childUpdata="hidden"></child>
 </div>
</template>

<script>
import child from '@/components/child'
 export default {
   data () {
     return {
       isshow: false
     }
   },
   components: {
     child
   },
   methods: {
     show() {
       this.isshow = true
     },
     hidden(e) {
       this.isshow = e
     }
   }
 }
</script>

子组件代码

<template>
  <div>
    <div class="bgtest">我是子组件
      <button class="childBtn" @click="childUpdata">点我隐藏</button>
    </div>
  </div>
</template>
<script>
 export default {
   data () {
     return {
     }
   },
   methods: {
     childUpdata() {
       this.$emit('childUpdata', false)
     }
   }
 }
</script>
<style>
.bgtest{
  width: 80%;
  height: 100px;
  background-color: red;
  margin-top: 30px;
  color: white;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}
.childBtn{
  widows: 50px;
  height: 30px;
  border: none;
  border: 1px solid green;
}
</style>

现在我要将父组件中的@childUpdata="hidden"改为@update:isshow="hidden"

<child v-show="isshow" @update:isshow="hidden"></child>

那子组件也要修改

changeIsShow() {
  this.$emit('update:isshow', false)
}

运行正常~

那么如果我将父组件的hidden直接写成匿名函数，也能运行吧：

<child v-show="isshow" @update:isshow="function(e){isshow=e}"></child>

接着我可以把匿名函数改为箭头函数，也可以吧

<child v-show="isshow" @update:isshow="e => isshow=e"></child>

接下来我在做最后一次修改

<child v-show="isshow" :isshow.sync="isshow"></child>

终于看到了.sync了，因此我们可以得出 :isshow.sync="isshow"其实是 @update:isshow="e=>isshow=e"语法糖。是其一种简写形式, 附上完整代码。

父组件

<template>
 <div>
   <button @click="show">我是父组件中的按钮</button>
   <child v-show="isshow" :isshow.sync="isshow"></child>
 </div>
</template>
<script>
import child from '@/components/child'
 export default {
   data () {
     return {
       isshow: false
     }
   },
   components: {
     child
   },
   methods: {
     show() {
       this.isshow = true
     }
   }
 }
</script>
<style>
</style>

子组件

<template>
  <div>
    <div class="bgtest">我是子组件
      <button class="childBtn" @click="childUpdata">点我隐藏</button>
    </div>
  </div>
</template>
<script>
 export default {
   data () {
     return {

     }
   },
   methods: {
     childUpdata() {
       this.$emit('update:isshow', false)
     }
   },
   components: {
   }
 }
</script>
<style>
.bgtest{
  width: 80%;
  height: 100px;
  background-color: red;
  margin-top: 30px;
  color: white;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}
.childBtn{
  widows: 50px;
  height: 30px;
  border: none;
  border: 1px solid green;
}
</style>

另外官方文档这样说：当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：大概就是这样
父组件：

data () {
     return {
       obj: {
         a: 1,
         b: 2
       },
       isshow: false
     }
   }
<child  v-bind.sync="obj"></child>

子组件：

<button class="childBtn" @click="aUpdata">点我修改a的值</button>
<button class="childBtn" @click="bUpdata">点我修改b的值</button>
aUpdata() {
 this.$emit('update:a', '11')
},
bUpdata() {
 this.$emit('update:b', '22')
}

这里有小伙伴可能会说：我们可以prop接收直接修改，父组件也会更新的，但规范做法是无论如何都不允许直接修改父组件传过来的值，虽然不会报错，但是对于追溯数据是不友好的，建议还是通过emit将子组件修改的值再传递给父组件

因此，我们可以总结：

.sync的作用就是在父级中给组件添加上v-on:update:xxx这么一个监听，相当于一个语法糖，所以当你要绑定的是一个简单数据类型的时候，就可以使用它，并且子组件需要用$emit来配合，如果绑定的是一个引用类型可以不使用，因为子组件随意修改都会触发