vueの.sync修飾子を分析する

• 公式ドキュメントvue .sync。

• ドキュメントによると、.sync修飾子は子コンポーネントの親コンポーネントへの双方向バインディングを可能にすると理解されています。これはコンパイル時の構文上の糖分として存在します。親コンポーネントのプロパティを自動的に更新するv-onリスナーで拡張されています。

サンプルコードは以下の通りです：

親コンポーネント

<template>
 <div class="app">
 {{dataApp}}
 <hr>
 <Child :money.sync="dataApp"/>
 // <Child :money="dataApp" v-on:update:money="dataApp = $event"/> //この2つの文は等価である
 </div>
</template>
<script>
 import Child from "./Child.vue";
 export default {
 data() {
 return { dataApp: 10000 };
 },
 components: { Child }
};
</script>

サブアセンブリ

<template>
 <div class="child">
 {{money}}
 <button @click="$emit('update:money', money-100)">
 </button>
 </div>
</template>
<script>
 export default {
 props: ["money"]
};
</script>

この例では、親コンポーネントが子コンポーネントにパラメータ money を渡し、子コンポーネントが $emit を使用して更新イベントをトリガーします。

<button @click="$emit('update:money', money-100)">

親コンポーネントはv-onを介して子コンポーネントのデータ変更をリッスンします。

.sync 構文

 <Child :money.sync="dataApp"/>

ブイオン・リスナー

<Child :money="dataApp" v-on:update:money="dataApp = $event"/>

<Child :money="dataApp" v-on:update:money="dataApp = $event"/> <Child :money.sync="dataApp"/>と等価であることに注意してください。