Vueエンジニアリング開発V-modelによりコンポーネント間変数バインドを基本的に実現

Vueエンジニアリング開発V-modelによるコンポーネント間データバインドの基本実現
周知のようにvueエンジニアリング開発のモデルの下でプロジェクトの開発進度を増加することができる.新型開発モデルと先端開発技術に対する私たちの要求も急速に向上した.しかし、入門したばかりか、Vueに接触したばかりのエンジニアリング開発モデル(私たちは足場と呼ばれています)では、コンポーネント間の相互転送データに迷っています.編集者は接触したばかりの時も迷った顔をしていた.しかし、接触と認識がますます多くなるにつれて、あなたはゆっくりとこの中の論理が実はとても簡単であることを発見することができます.次に本題に入って、足場の中でどのようにV-modelというVUE内蔵命令を通じてコンポーネント間でコンテンツをバインドするかを説明します.
1.V-modelの原理を理解する
V-modelはVueに内蔵された命令であり、V変数とフォームコンテンツの双方向バインドを実現することができる.すなわち、データの双方向バインディング(MVVM)すなわち、データ層とビューレイヤの双方向バインディングを実現するために使用される.これにより、コンテンツデータを迅速に操作できるようになり、VueがDOMを直接操作しないという説も実現した.
2.V-modelの深層分割
V-modelが足場の中でデータの双方向バインドを実現したのは、Vueにvalueとinputイベントを内蔵してバインドすべきで、人が直接パッケージしたので、私たちは直接持ってきて使用することができます.フォーム内でvalueは直接データの内容を収集することができるが、inputイベントは収集した内容をV変数に割り当てることができる.v-model value==Vue変数->ビュー
@inputイベント==Vue変数コード実装:

  <div>
    <input type="text" :value="msg" @input="fn">
  </div>
<script>
//   :  vue    v-model   
// v-model  :       
//     value   vue        
// view  -  model   (MVVM    ),     
//      ->   
//      <-   
export default {
     
  data () {
     
    return {
     
      msg: 'hello'
    }
  },
  methods: {
     
    fn (e) {
     
      this.msg = e.target.value //       value    msg   (View -> Model)
    }
  }
}

3.V-mode特性と補助コンポーネントによって、コンポーネント間の変数バインドを実現する
くだらないことは言わないで直接コードのプレゼンテーションをします;ターゲット:ペアレントコンポーネント間、変数の双方向バインドペアレントコンポーネントのコード:

  <div>
    <p>   : {
     {
      num }}</p>
    <!-- <Child :value="num" @input="fn"></Child> -->
    <Child v-model="num"></Child>
  </div>
<script>
//   :       ,    "    "
import Child from './Child'
export default {
     
  data () {
     
    return {
     
      num: 10
    }
  },
  methods: {
     
    fn (a) {
     
      this.num = a
    }
  },
    components: {
     
    Child
  },
}
</script>

サブアセンブリコード:

<template>
  <div>
      <p>    {
     {
      value }}</p>
      <button @click="addFn">+</button>
  </div>
</template>

<script>
// "value  "-      
//     ,    "input  "
export default {
     
  props: {
     
    value: Number
  },
  methods: {
     
    addFn () {
     
      const a = this.value + 1
      this.$emit('input', a)
    }
  }
}
</script>

4.まとめ
上記と結びつけて、コードの分析を加えると、コンポーネント間のデータバインドも基本的に実現できると信じています.小編の創作レベルは限られている.もし不足があれば私を信じてください...小编初入ブログよろしくお愿いします...