Vueのsync修飾子の詳細な説明

1. 手順

指示とは命令です。文字通りの意味は、何をすべきかを指示するということです。指示を送るようなもので、指示を受けた人はそれを実行するだけです。 Vue の命令は統一されたわかりやすい形式になっています。つまり、命令は次のようにv-で始まります。

<div v-text="x"> </div> //v-text はラベルテキスト命令を指定します<div v-on:click="add"> <div> //v-on イベントバインディング命令

しかし、すべての指示がv-で始まるわけではありません。いくつかの略語も指示です。例えば、

<img :src="x"> </img> //v-bind:src の省略形 <button @click="add"> </button> //v-on:click の省略形

2. 修飾語

修飾子は、命令内のイベント処理命令 v-on と密接に関連する構文糖です。いわゆる構文糖は非常に優れており、シンプルで使いやすいものです。プログラミングの世界では、これは、実行可能なすべての処理が実行され、実行する必要があるのは最も単純な処理のみであることを意味します。

イベント ハンドラーには、デフォルト イベントを防ぐ event.preventDefault() やイベント バブリングを防ぐ event.stopPropagation() など、非常に一般的な要件がいくつかあります。したがって、Vue はイベント処理プロセスにおけるこれらの一般的な要件を私たちに代わって処理します。必要なときに Vue に伝えるだけで、デフォルト イベントの防止やイベント バブリングの防止などが自動的に行われます。次に、Vue に伝える方法は、Vue が提供する修飾子です。修飾子は、ドットで始まる命令サフィックスで表されます。

<a> タグのデフォルトのページ更新イベントを防止する preventDefault メソッドの例は次のとおりです。

一般的な慣行

<a href="" v-on:click=" rel="external nofollow" pe($event)">Vue クリックリンク</a> //Vue で元の DOM イベントにアクセスするには、特別な変数 $event を使用してメソッドに渡します。元の HTML では、event です。

// ... 
メソッド: {
    pe(e){
        e.preventDefault()
    }
}

修飾子の使用

<a v-on:click.prevent>Vue クリックリンク</a> //prevent 修飾子は上記の e.preventDefault() と同等です

上記の例から、修飾子は構文上の糖衣であり、共通の要件を事前に記述して、必要なときにそれを言うだけで済むことがわかります。イベント ハンドラがある場合は、次のように記述を続けます。

<a href="" v-on:click.prevent=" rel="external nofollow" pp">Vue クリック リンク</a>

// ... 
メソッド: {
    pp(){
        console.log('ページ実行イベントにジャンプしない')
    }
}

上記の v-on:click.prevent="pp" のように、修飾子は順番に実行されます。つまり、クリックすると、最初に修飾子 prevent が実行されてデフォルトのイベントが防止され、その後、後続の pp イベント処理関数が実行されます。

修飾子は、イベントの関連する処理機能にほぼ 1 対 1 で対応しています。イベントに応じて、異なるイベントに対応する修飾子は、以下に示すようにいくつかのカテゴリに分類されます。

修飾子の由来と意味は上記の通りです。具体的な修飾子については、実際に使用する際に必要な情報を公式サイトで確認することができます。覚えておくべき最もよく使われる修飾子は 2 つあります。@click.stop はイベントのバブルを防ぐためのもの、@click.prevent はデフォルト イベントを防ぐためのもの、@keypress.enter はキーが押された Enter イベントです。

3. .sync 修飾子

.sync 修飾子は、イベント本来のイベント処理関連関数の進化形ではなく、Vue 自体が定義した修飾子であるため、比較的特殊です。例えば、上記の修飾子分類では、.sync もカスタムイベントの修飾子として分類されています。では、このカスタムイベントとは一体何なのでしょうか。

このイベントは、eventBus イベントに対応します。eventBus イベントは MVC のパターンです。簡単に言えば、パブリッシュとサブスクライブのプロセスです。つまり、2 つのパーティがあります。パーティ A は、特定のイベントを常にリッスンする責任があり、パーティ B は、必要に応じてこのイベントをトリガーする責任があります。パーティ A は、イベントがトリガーされたことを聞くと、特定の操作を実行します。当事者 A はサブスクライブし、当事者 B はパブリッシュし、両者はパブリッシュおよびサブスクライブ モデルを採用しています。

では、Vue ではいつこれが必要になるのでしょうか?

つまり、Vue コンポーネントが外部データ プロパティを受け入れる場合、Vue では、子コンポーネントはプロパティを介して外部データを受け取った後にデータを使用する権限のみを持ち、プロパティを変更する権限は持たないと規定されています。なぜなら、子コンポーネントが外部から送信されたデータを変更すると、子コンポーネントとそれを使用する親ファイルが相互に変更される可能性があり、親コンポーネントと子コンポーネントの変更の明らかなソースがなくなるためです。結局、誰がデータを変更したかは誰にもわからず、データの制御が困難になります。そのため、Vue では、コンポーネントは props のプロパティのみを使用でき、自分で変更することはできないと規定されています。変更したい場合は、変更するデータの実際の所有者、つまりコンポーネントを使用する親ファイルに通知する必要があります。

使用される通知方法は、eventBus パブリッシュおよびサブスクライブ モードです。

.sync を使用しない

サブコンポーネントはイベントをトリガーします。イベント名の形式は update:myPropName である必要があり、$emit 関数を使用してトリガーされます。

this.$emit('update:title', newTitle) //newTitleはpropsデータが変更された後に変更したい値です

親コンポーネントはそのイベントをリッスンし、必要に応じてローカル データ プロパティを更新できます。

<myconponent :title="Ptitle" @update:title="Ptitle = $event" ></myconponent>
//親コンポーネントのイベントをリッスンします。イベントがトリガーされた後に渡される値は $event として受け取られます。$event === newTitle。Ptitle は親コンポーネントのデータです。

または定義されたaccept関数パラメータ

<myconponent :title="Ptitle" @update:title="val => Ptitle = val" ></myconponent>
//この時点で受け取った値は関数のパラメータとして使用されます

.syncの使用

上記のプロセスは実際のニーズでは非常に一般的なので、Vue は親コンポーネントのリスニングを値渡し修飾子 .sync として定義します。上記のコードは次のようになります。

サブコンポーネント（同じ）

this.$emit('update:title', newTitle)

親コンポーネント

<myconponent :title.sync="Ptitle"></myconponent> //上記の値を渡して監視するのと同等

甘くないですか？

4. まとめ

.syncの使用ルール

1. コンポーネントはpropsの外部データを変更できない

2. this.$emitはイベントをトリガーし、パラメータを渡すことができる

3.$eventは$emitのパラメータを取得できる

以上がVueのsync modifierの詳しい説明です。Vueのsync modifierについてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください！