vue で v-model を使用して親子コンポーネント通信を実現する方法

vue.js は、データ駆動型の Web インターフェイスを構築するためのライブラリです。 Vue.js の目標は、可能な限りシンプルな API を使用して、応答性の高いデータ バインディングと合成ビュー コンポーネントを有効にすることです。以下の記事では、vue プロジェクトにおける v-model 親コンポーネントと子コンポーネントの通信実装に関する関連情報を中心に紹介します。必要な方は参考にしてください。

前書き

私たちの vue プロジェクトでは、親コンポーネントが v-model をバインドし、子コンポーネントの入力が親コンポーネントの v-model にバインドされた値を変更することがよくあります。多くの友人はこの操作についてあまり理解していませんが、これには v モデルについてのより深い理解が必要です。今日は v モデルについて話しましょう。

vue の双方向データバインディング

v-model コマンドは、d5fd7aea971a85678ba271703566ebfd、221f08282418e2996498697df914ce4e、4750256ae76b6b9d804861d8f69e79d3 などのフォーム要素でのみ使用できます。いわゆる双方向です。バインディングとは、js の vue インスタンスのデータが、レンダリングされた dom 要素のコンテンツと一致することを指します。2 つのうちのどちらが変更されても、もう一方は同じデータに応じて更新されます。

この質問は多くのフロントエンドインタビューで言及されるでしょう。インタビュアーは、Vue における双方向データ バインディングの原理は何ですかと尋ねました。もちろん、これもよくある質問で、Baidu で検索するとどこでも答えが見つかります。

一般に、Object.defineProperty() はデータの取得と設定を監視してデータ ハイジャックを実現するために使用されていることがわかります。

Object.defineProperty() についてあまり知らない場合は、上のリンクをクリックして構文を確認してください。

簡単な例:

var blog = {
 name: 'haorooms博客'
};
console.log(blog.name); // haorooms博客

を実行したい場合に便利です。コードは次のとおりです: console.log(blog.name)的同时，直接给haorooms博客加个书名号，那要怎么处理呢？或者说要通过什么监听对象 blog的属性值。这时候Object.defineProperty( )

var blog= {}
var name = '';
Object.defineProperty(blog, 'name', {
 set: function (value) {
 name = value;
 console.log('欢迎来到' + value);
 },
 get: function () {
 return '《' + name + '》'
 }
})
blog.name = 'haorooms博客'; // 欢迎来到haorooms博客
console.log(blog.name); // 《haorooms博客》

上記のコードを実行すると、効果がわかります。

Vue の双方向データ バインディングについて、どのように実装されていますか?インターネット上には実装コードもたくさんあるので、ここでは詳しく説明しません。

v-model の使用法

上記で散々述べてきましたが、実際には、Vue は単一のデータ フローであり、v-model は単なる構文糖であることを説明するためです。 。

<input v-model="haorooms" />
<input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />

コードの最初の行は、実際には 2 行目の単なる構文糖です。コードの 2 行目は次のように省略できます:

<input :value="haorooms" @input="haorooms= $event.target.value" />

つまり、

<input v-model="haorooms" />

は

<input :value="haorooms" @input="haorooms= $event.target.value" />

Using v-model onComponents

元の質問に戻りますか? v-model は vue の親コンポーネントと子コンポーネントの間でどのように通信しますか?コンポーネントでどのように使用するのでしょうか?上記の例を理解していれば、コンポーネントで v-model を簡単に使用できます。

親コンポーネントのコードは次のとおりです:

 <template>
 <p id="demo">
 <test-model v-model="haorooms"></test-model>
 <span>{{haorooms}}</span>
</p>
</template>
<script>
  import testModel from &#39;src/components/testModel&#39;
  export default {
   data(){
      return{
         haorooms: "haorooms"
      }
    },
    components: {
      testModel,
    }
  }
</script>
<style lang="scss" scoped>
</style>

子コンポーネントのコードは次のとおりです:

<template>
<span>
   <input
    ref="input"
    :value="value"
    @input="$emit(&#39;balabala&#39;, $event.target.value)"
   >
  </span>
</template>
<script>
  export default {
    data(){
      return{
      }
    },
    props: ["value"],
    model: {
      prop: &#39;value&#39;,
      event: &#39;balabala&#39;
    }
  }
</script>
<style lang="scss" scoped>
</style>

上記のコードを使用して、子コンポーネントによって親コンポーネントの v-model バインディングの値を変更できます。

実装のスクリーンショットは次のとおりです:

v-modelの欠点と解決策

チェックボックスやラジオボタンなどの一般的なコンポーネントを作成する場合、v-modelは使いにくいです。

<input type="checkbox" v-model="haorooms" />

これは次の方法で解決できます:

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

親コンポーネントは次のように記述できます:

<my-checkbox v-model="haorooms"></my-checkbox>

子コンポーネント:

<input 
        type="checkbox"
        <!--这里就不用 input 了，而是 balabala-->
        @change="$emit(&#39;balabala&#39;, $event.target.checked)"
        :checked="value"
       />
 export default {
    data(){
      return{
      }
    },
    props: [&#39;checked&#39;], //这里就不用 value 了，而是 checked
   model: {
     prop: &#39;checked&#39;,
     event: &#39;balabala&#39;
    },
  }

上記は私が皆さんに役立つようにまとめたものです。将来。

関連記事:

JavaScriptを使用してカスタムイベントメカニズムを実装する方法

JavaScriptによる地図データ構造の詳細な解釈

JavaScriptを使用して2次元の週間ビューカレンダーを開発する方法

以上がvue で v-model を使用して親子コンポーネント通信を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。