快捷導(dǎo)航

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

更新時(shí)間：2022年08月04日 09:14:02 作者：Celester_best

在vue中，子組件如果想修改父組件的變量，一般做法是通過(guò)綁定事件的方法，父組件向子組件傳遞修改變量的方法，子組件觸發(fā)修改變量的方法執(zhí)行，這種方式中規(guī)中矩；另一種方法是使用sync修飾符，此方法可以減少很多代碼量

不使用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">點(diǎn)擊</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update", !this.show);
    },
  },
};
</script>

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

使用sync修飾符，代碼就會(huì)簡(jiǎn)單很多。

使用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">點(diǎn)擊</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update:show", !this.show);
    },
  },
};
</script>

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

sync修飾符的原理

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

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

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

<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>

我們?cè)龠M(jìn)一步修改代碼（綁定方法時(shí)指明要修改的變量）：