Vue中sync修飾符分析原理及用法範例

2022-08-04 14:01:59

不使用sync修飾符的程式碼範例

父元件：

<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事件沒有傳遞引數，其實繫結事件預設傳遞了$event引數。

這裡值得注意的是如果繫結的是clikc等原生事件時，$event是指事件物件，如果是自定義事件，$event則指子元件觸發該方法時傳遞的引數，在上面的例子中，$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>

我們再進一步修改程式碼（繫結方法時指明要修改的變數）：