<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子組件</h3>
    <SyncDemo :show="show" @update="update"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
  methods: {
    update(flag) {
      this.show = flag;
    },
  },
};
</script>

子組件：

<template>
  <div>
    <button @click="changeFlag">點擊</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update", !this.show);
    },
  },
};
</script>

點擊子組件的按鈕就可以控制父組件“11111”的顯示與隱藏。

使用sync修飾符，代碼就會簡單很多。

使用sync修飾符的代碼示例

父組件：

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子組件</h3>
    <SyncDemo :show.sync="show"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

子組件：

<template>
  <div>
    <button @click="changeFlag">點擊</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update:show", !this.show);
    },
  },
};
</script>

可以看到使用sync修飾符之后，父組件就不需要向子組件傳遞方法，父組件也不需要特意寫修改變量的方法了。此時點擊子組件的按鈕，一樣可以控制父組件的“11111”的顯示與隱藏。

sync修飾符的原理

在不使用sync時父組件中子組件綁定的update事件沒有傳遞參數(shù)，其實綁定事件默認(rèn)傳遞了$event參數(shù)。

這里值得注意的是如果綁定的是clikc等原生事件時，$event是指事件對象，如果是自定義事件，$event則指子組件觸發(fā)該方法時傳遞的參數(shù)，在上面的例子中，$event則指show變量。

所以不使用sync修飾符時，父組件的代碼可以改造成如下（直接將$event賦值給show變量，父組件不需要再另外寫一個修改變量的方法）：

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子組件</h3>
    <SyncDemo :show="show" @update="show = $event"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

我們再進(jìn)一步修改代碼（綁定方法時指明要修改的變量）：