Vue sync修饰符的使用

父子组件传值，父组件可以给子组件传值，但是子组件是不能修改组件提供的值，这里vue提供了sync修饰符，以前父组件点击子组件显示，子组件关闭按钮，父组件再点击子组件就无法让子组件显示。因为子组件点击关闭时候v-show属性为false,父组件只能在子组件中设置ref，通过ref获取到子组件的v-show属性，然后在点击事件下更改子组件的v-show属性为true，这样点击父组件点击子组件，子组件就能显示了。

现在可以通过sync修饰符子组件可以更改父组件的v-show属性。

Child:

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

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



parents:

<template>
  <div class="hello">
    <Child :show.sync="valueChild"></Child>
    <button @click="changeValue">toggle</button>
  </div>
</template>
会拓展为：

<div class="hello">
    <Child :show="valueChild" @change='update: show="val=valueChild=val'></Clild>

当子组件需要更新show的值时，它需要显式地触发一个更新事件：this.$emite('update:show',newValue)

</Child>
    <button @click="changeValue">toggle</button>

  </div>

<script>
  import Child from '../components/Child'
export default {
  name: 'HelloWorld',
  components:{
    Child
  },

  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      valueChild:true,
    }
  },
  methods:{
    changeValue(){
      this.valueChild = !this.valueChild
    }
  }
}
</script>