【Day 07】v-modelはどのように実現したのか、文法糖は実際に何なのか.
v-modelはどのように実現されていますか.文法糖は実際に何ですか.一、文法糖 二、実現原理 1. 一般フォーム要素に作用する 2. コンポーネントに作用する
一、文法糖
コンピュータ言語に追加された文法を指します.この文法は言語の機能に影響を与えませんが、プログラマーが使いやすいです.通常、文法糖の使用は、プログラムの可読性を増加させ、プログラムコードのエラーの機会を減少させることができる.糖はその位置の文法構造を変えずに運転時の等価を実現した.単純に理解できるのは、砂糖を加えたコードのコンパイル後、砂糖を加えた前と同じように、コードはより簡潔で流暢で、コードはより意味が自然である.
二、実現原理
1.一般フォーム要素に適用は、 に動的に設定する.
2.コンポーネントに作用するカスタムコンポーネントでは、 が利用する.本質は親子コンポーネント通信の構文糖であり、propと$emitによって を実現する.
したがって、は、親構成要素 に変更することができる.コンポーネントの実装では、v-modelプロパティによってサブコンポーネントが受信する
一、文法糖
コンピュータ言語に追加された文法を指します.この文法は言語の機能に影響を与えませんが、プログラマーが使いやすいです.通常、文法糖の使用は、プログラムの可読性を増加させ、プログラムコードのエラーの機会を減少させることができる.糖はその位置の文法構造を変えずに運転時の等価を実現した.単純に理解できるのは、砂糖を加えたコードのコンパイル後、砂糖を加えた前と同じように、コードはより簡潔で流暢で、コードはより意味が自然である.
二、実現原理
1.一般フォーム要素に適用
inputを動的に結合するvalueは、message変数を指し、inputイベントをトリガするときに、messageを目標値<input v-model="sth" />
<input
v-bind:value="message"
v-on:input="message=$event.target.value"
>
2.コンポーネントに作用する
v-modelのデフォルトでは、valueという名前のpropと、inputという名前のイベントしたがって、
v-modelのシンタックス糖を本質的に<child :value="message" @input="function(e){message = e}">child>
prop名、および配布されるイベント名を構成することができる.//
<aa-input v-model="aa">aa-input>
//
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value">aa-input>
// ：
<input v-bind:value="aa" v-on:input="onmessage">aa-input>
<script>
export default {
props: {
value: aa, }
methods: {
onmessage(e){
$emit('input', e.target.value)
}
}
}
script>
v-modelはvalueをpropとして使用し、inputをeventとして使用しますが、ラジオボックスやチェックボックスボタンなどの入力タイプでは、value propを使用して異なる目的を達成したい場合があります.modelオプションを使用すると、これらの状況による競合を回避できます.jsはinput入力ボックスの入力データの変更を傍受し、oninputで、データの変更後すぐにこのイベントをトリガーします.inputイベントによってデータ$emitが外に出て、親コンポーネントで受信される.親アセンブリ設定v-modelの値はinput $emitからの値です.