Vue2.x の親コンポーネントと子コンポーネントの双方向バインディングについて (詳細なチュートリアル)

この記事では主に、Vue2 間の双方向バインディングの問題を解決する方法を紹介します。BIG を改善するために、入力を含むコンポーネントを作成するときに問題が発生しました。子コンポーネントと呼び出し元（親コンポーネント）のデータを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: &#39;NeIpt&#39;, 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return &#39;&#39; 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit(&#39;input&#39;, val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

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

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

子コンポーネントのcurrentValueを変更するとき、実際には入力イベントが$emitによってトリガーされ、値が渡されます呼び出し元の v モデル、つまり双方向性バインディングを実現します。

上記は私があなたのためにまとめたものです。

関連記事:

vue+element-ui+ajaxを使ってフォームのインスタンスを実装する

vueでコンポーネントを登録するいくつかの方法のまとめ

Vue.jsカスタムイベントフォーム入力コンポーネントメソッド

以上がVue2.x の親コンポーネントと子コンポーネントの双方向バインディングについて (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。