Vue2 親コンポーネントと子コンポーネント間の双方向バインディングを実装する方法

今回は、Vue2の親コンポーネントと子コンポーネントの双方向バインディングを実装する方法を説明します。注意点とは何ですか?実際のケースを見てみましょう。

最近、Vue2をベースにした一連のUIコンポーネントの書き方を勉強していて、双方向バインディングを実現するためにVuexを使おうと考えたのですが、他の優れたUIフレームワークを観察したところ、Vuexを使用すると他のユーザーに迷惑がかかることが分かりました。ということで、専門家によるいくつかの記事を参考にして解決策を見つけました。

初めて Vue フレームワークに触れる私のような同僚を助けたいと考えて、ここにソリューションを投稿します。

サブコンポーネントのコードロジック

<template> 
 <p class="ne-ipt"> 
  <input type="text" v-model="currentValue"> 
 </p> 
</template> 
 
<style lang="less" scoped> 
 @import "../../assets/styles/form/form.less"; 
</style> 
<script> 
 export default { 
  name: 'NeIpt', 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return '' 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit('input', val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

親コンポーネントのコードロジック

<template> 
 <p id="button-index"> 
  <ne-ipt placeholder="姓名" v-model="test"></ne-ipt> 
 </p> 
</template> 
<style> 
</style> 
<script> 
 import NeIpt from './NeIpt' 
 export default { 
  name: 'form-index', 
  data () { 
   return { 
    test: '' 
   } 
  }, 
  components: { 
   NeIpt 
  } 
 } 
</script>

サブコンポーネントの currentValue を変更すると、input イベント が $emit を通じて実際にトリガーされ、値が呼び出し元の v-model に渡されるため、双方向のバインディングが実現されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Django でファイルのダウンロード機能を実装する方法

vue でローカルの静的画像を参照する方法

以上がVue2 親コンポーネントと子コンポーネント間の双方向バインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。