sync修饰符的使用

为什么使用sync

再vue中官网的介绍：我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源

目的：再子组件去改变父组件的值的时候会有明显的代码样式，方便维护，为什么要这样为什么不用v-molder，因为v-model中已经说明了不要直接去改变v-model中的值，可以去拷贝在改变，在传值，这个也是v-model和sync修饰符的区别。

再我应用了后我认为就是：再父组件上省去了触发事件，并且直接把子组件中传过来的值赋值给v-bind且添加了.sync的那个变量（下面例子直接将子组件传过来的flase给valueChild）

这里说一下v-model：少一个v-bind传值，和一个接收事件，事件的作用:把子组件传过来的值替换掉目前的值，从而达到双向绑定的效果

案例：一个简单父儿组件传值

父组件

<template>
  <div class="details">
    <myComponent
      :show.sync="valueChild"
      style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
    ></myComponent>
    <button @click="changeValue">toggle</button>
  </div>
</template>

<script>
import myComponent from './zj'
export default {
  components: {
    myComponent
  },
  data () {
    return {
      valueChild: true,
    }
  },
  methods: {
    changeValue () {
      this.valueChild = !this.valueChild
    }
  }
}

</script>

这里我将儿组件命名为的是zj.vue

子组件 name：myComponent

<template>
  <div v-if="show">
    <p>默认初始值是{{show}}，所以是显示的</p>
    <button @click="closeDiv">关闭</button>
  </div>
</template>

<script>
export default {
  props: ['show'],
  data () {
    return {
    }
  },
  methods: {
    closeDiv () {
      this.$emit('update:show', false); //触发 input 事件，并传入新值
    }
  },
  components: {

  },
}
</script>

解析：在父组件中给某一个prop中的传值添加.sync修饰符后，那么在子组件中便可以，直接在自定义事件中的第一个参数中以update:myPropName 的模式触发事件取而代之，那么第二个参数遍就直接变成了myPropName的值，去传给父组件，而父组件都不需要去监听事件去改变值这个prop传值，例如上面例子中的父组件中的valueChild直接变成就false，而不用去在监听一个事件，在那个事件中去把valueChild直接变成就false，从而达到了再父组件上省去了监听触发事件这一步操作而是直接赋值