vue2 の v-model を深く理解し、コンポーネントでこの構文をサポートする方法を確認します。

この記事では、vue2 の v-model を理解し、v-model が双方向バインディングであるか一方向データ フローであるかを確認し、開発するコンポーネントで v-model をサポートする方法を説明します。みんなの役に立つように。

この記事を読む

次の内容が得られます:

• 理解: v-model 構文とは何か砂糖？ vue2 ネイティブ コンポーネントに対してどのような特別な処理が行われましたか?
• 調べてください: v-model それは 一方向データ フロー ですか、それとも 双方向データ バインディング ですか?
• 理解してください: v-model 糖衣構文以外の「副作用」は何ですか?
• コンポーネントで v-model 構文をサポートする方法を学習します。

1. v-model の本質は糖衣構文です。

『v-model は本質的に単なる糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオに対して特別な処理を実行する役割を果たします。 』 - 公式ドキュメント。 [関連する推奨事項: vue.js チュートリアル ]

糖衣構文とは何ですか?

シンタックスシュガーとは、簡単に言うと「便利な文章」です。

ほとんどの場合、v-model="foo" は、:value="foo" に @input ="foo を加えたものと同等です。 = $event";

<!-- 在大部分情况下，以下两种写法是等价的 -->
<el-input v-model="foo" />

<el-input :value="foo" @input="foo = $event" />

はい、ほとんどの場合これは当てはまります。

ただし、例外もあります。

• vue2 はコンポーネントに model 属性を提供し、ユーザーが ## をカスタマイズできるようにします。 # 渡された値のプロップ名 と更新された値 のイベント名 。今回は省略し、セクション 4 で詳細を説明します。

• ネイティブ

  html ネイティブ要素については、vue が私たちに無視させるために多くの「汚い仕事」を行っています html API の違い。次の要素の左右の書き方は同等です:

• textarea 要素:

• select ドロップダウン ボックス:

##input type='radio'
• ラジオ ボタン:

##input type='checkbox'

複数のチェックボックス:

プログラミング的思考の観点からは、ユーザーが「詳細を隠す」ことを支援するこの方法は、カプセル化

と呼ばれます。

2. v-model は単なる構文糖ですか? (豆知識)

v-model

は糖衣構文であるだけでなく、副作用もあります。

副作用は次のとおりです。

v-model

が応答オブジェクトに存在しないプロパティにバインドされている場合、vue このプロパティを追加して応答性を高めるだけです。 たとえば、次のコードを見てください:

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: &#39;公众号: 前端要摸鱼&#39;,
      }
    }
  }
}

user.tel

属性はレスポンシブ データでは定義されていませんが、

template では定義されています。 しかし、v-model は user.tel をバインドするために使用されます。入力すると何が起こると思いますか? 効果を見る:

答えを明らかにする: tel

属性が

user## に追加されます# 、および tel この属性は引き続き 応答です。 これが「副作用」の影響ですが、学習しましたか？ 3.

v-model

それは双方向のバインディングですか、それとも一方向のデータ フローですか?

2.1 v-model それは双方向バインディングですか?

はい、役人は「はい」と言いました。

『v-model ディレクティブは、

、

<p>、および <code><select># の形式で使用できます。 # # 要素に双方向のデータ バインディングを作成します。 』——vue2 公式ドキュメント</select></code><code>2.2 </code>v-model<code> は一方向のデータ フローですか? </code></p> <h3 data-id="heading-5">はい、これは一方向のデータ フローの典型的なパラダイムでもあります。 <code></code> </h3>公式は明言していませんが、両者の関係は推測できます。 <blockquote> <p></p>単一データ フローとは何ですか? </blockquote> <p></p>子コンポーネントは、親コンポーネントによって渡された <ul>prop<li> 属性を変更できません。推奨されるアプローチは、イベントをスローし、親コンポーネントに境界を変更するように通知することです。それ自体の価値。 </li> </ul> <p><code>v-model</code> どうやって行うのですか? </p> <ul> <li> <code>v-model</code> このアプローチは、単一のデータ フローと完全に一致しています。さらに、命名とイベント定義に関する仕様も提供します。 </li> <p>众所周知 <code>.sync</code> 修饰符是单向数据流的另一个典型范式。</p> <p><img src="https://img.php.cn/upload/image/757/338/548/164129412698726vue2%20%E3%81%AE%20v-model%20%E3%82%92%E6%B7%B1%E3%81%8F%E7%90%86%E8%A7%A3%E3%81%97%E3%80%81%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E3%81%93%E3%81%AE%E6%A7%8B%E6%96%87%E3%82%92%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" title="164129412698726vue2 の v-model を深く理解し、コンポーネントでこの構文をサポートする方法を確認します。" alt="vue2 の v-model を深く理解し、コンポーネントでこの構文をサポートする方法を確認します。"></p> <p>『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。</p> <h2 data-id="heading-6">四、如何让你开发的组件支持 <code>v-model</code> </h2> <blockquote><p>虽然不想说，但这确实是高频面试题。</p></blockquote> <p>在定义 <code>vue</code> 组件时，你可以提供一个 <code>model</code> 属性，用来定义该组件以何种方式支持 <code>v-model</code>。</p> <p><code>model</code> 属性本身是有默认值的，如下：</p><pre class="brush:js;toolbar:false;">// 默认的 model 属性 export default { model: { prop: &#39;value&#39;, event: &#39;input&#39; } }</pre><p>也就是说，如果你不定义 <code>model</code> 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，<code>v-model="foo"</code> 就完全等价于 <code>:value="foo"</code> 加上 <code>@input="foo = $event"</code>。</p> <p>如果把 <code>model</code> 属性进行一些改装，如下：</p><pre class="brush:js;toolbar:false;">// 默认的 model 属性 export default { model: { prop: &#39;ame&#39;, event: &#39;zard&#39; } }</pre><p>那么，<code>v-model="foo"</code> 就等价于 <code>:ame="foo"</code> 加上 <code>@zard="foo = $event"</code>。</p> <p>没错，就是这么容易，让我们看个例子。</p> <p>先定义一个自定义组件：</p><pre class="brush:js;toolbar:false;"><template> <div> 我们是TI{{ ame }}冠军 <el-button @click="playDota2(1)">加</el-button> <el-button @click="playDota2(-1)">减</el-button> </div> </template> <script> export default { props: { ame: { type: Number, default: 8 } }, model: { // 自定义v-model的格式 prop: &#39;ame&#39;, // 代表 v-model 绑定的prop名 event: &#39;zard&#39; // 代码 v-model 通知父组件更新属性的事件名 }, methods: { playDota2(step) { const newYear = this.ame + step this.$emit(&#39;zard&#39;, newYear) } } } </script></pre><p>然后我们在父组件中使用该组件：</p><pre class="brush:js;toolbar:false;">// template中 <dota v-model="ti"></dota> // script中 export default { data() { return { ti: 8 } } }</pre><p>看看效果：</p> <p><img src="https://img.php.cn/upload/image/230/560/305/1641294134984681.gif" title="1641294134984681.gif" alt="vue2 の v-model を深く理解し、コンポーネントでこの構文をサポートする方法を確認します。"></p> <p>让你的组件支持 <code>v-model</code> 就这么容易。</p> <h2 data-id="heading-7">五、demo和源码</h2> <blockquote> <p>获取源码请访问github </p> <p>https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model</p> </blockquote> <p>更多编程相关知识，请访问：<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">编程视频</a>！！</p> </ul>

以上がvue2 の v-model を深く理解し、コンポーネントでこの構文をサポートする方法を確認します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。