子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

<テンプレート>
  <div style="background-color: skyblue;">
    <h3>子コンポーネントが親コンポーネントを介してイベントを発行するのをリッスンしてプロパティを変更します</h3>
    <div>親オブジェクト:{{ obj }}</div>
    <div>親メッセージ:{{ メッセージ }}</div>
    <!-- 親コンポーネントが子コンポーネントを呼び出すと、子コンポーネントによってトリガーされた放出イベントを on 経由でリッスンして値を受け取り、ユーザーを更新します -->
    <emitChild
      :obj="obj"
      :msg="メッセージ"
      @update-obj="updateObj"
      @update-msg="更新メッセージ"
    />
  </div>
</テンプレート>

<スクリプト>
'./components/emitChild' から emittingChild をインポートします。

エクスポートデフォルト{
  名前: 'emitUpdate',
  コンポーネント:
    子を放出する
  },
  データ （） {
    戻る {
      オブジェクト: {
        名前: 'zhangsan'、
        年齢: 18
      },
      メッセージ: 'こんにちは'
    }
  },
  メソッド: {
    // 子コンポーネントによってトリガーされたイベントをリッスンし、データ内のオブジェクトを更新します
    updateObj (キー、newVal) {
      this.obj[キー] = newVal
    },
    // 子コンポーネントによってトリガーされたイベントをリッスンし、データ内のメッセージを更新します
    更新メッセージ (新しい値) {
      this.msg = 新しい値
    }
  }
}
</スクリプト>

<テンプレート>
  <div style="background-color: pink;">
    <div>
      <span>名前を変更:</span>
      <!-- ここで、バインディング値は value です。これは、入力が主にプロパティ データを表示するために使用され、実際の変更はサブコンポーネント内にないためです。サブコンポーネントは変更トリガー ソースとしてのみ使用されます -->
      <!-- 入力イベントをトリガー ソースのエントリ ポイントとしてバインドします -->
      <input type="text" :value="obj.name" @input="updateObj($event, 'name')">
    </div>
    <div>
      <span>年齢を変更:</span>
      <input type="text" :value="obj.age" @input="updateObj($event, 'age')">
    </div>
    <div>
      <span>メッセージを変更:</span>
      <input type="text" :value="msg" @input="updateMsg($event.target.value)">
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'emitUpdateChild',
  小道具: {
    オブジェクト: {
      タイプ: オブジェクト、
      デフォルト: () => {}
    },
    メッセージ: {
      タイプ: 文字列、
      デフォルト： ''
    }
  },
  メソッド: {
    // 親コンポーネントに obj を更新するよう通知する
    updateObj ($event, キー) {
      // 入力値と、更新する必要がある obj 内の対応する属性を受け取り、それを親コンポーネントに返します // 親コンポーネントは、子コンポーネントが更新する必要がある obj 内の属性値を知ることができます this.$emit('update-obj', key, $event.target.value)
    },
    // 親コンポーネントにメッセージの更新を通知する
    更新メッセージ (新しい値) {
      this.$emit('update-msg', newVal)
    }
  }
}
</スクリプト>

<テンプレート>
  <div style="background-color: skyblue;">
    <h3>親コンポーネントの同期修飾子と子コンポーネントの発行イベントを介してプロパティを変更する</h3>
    <div>親オブジェクト:{{ obj }}</div>
    <div>親メッセージ:{{ メッセージ }}</div>
    <!-- 親コンポーネントが子コンポーネントを呼び出してプロパティを渡す場合は、プロパティの後に .sync を追加するだけです -->
    <syncChild:obj.sync="obj":msg.sync="msg" />
    <!--
      同期は実際には、@listener トリガー イベント名 = "親データのプロパティ名 = エミットによって渡された値 (つまり $event)" を実行することと同じです。
      このコード -->
    <!-- 効果は次のコードと同等なので、親コンポーネントのメソッドでデータを変更するメソッドを定義する必要はありません-->
    <!--
      <同期子
        :obj="obj"
        :msg="メッセージ"
        @update-obj="obj = $event"
        @update-msg="メッセージ = $イベント"
      />
    -->
  </div>
</テンプレート>

<スクリプト>
'./components/syncChild' から syncChild をインポートします。

エクスポートデフォルト{
  名前: 'syncUpdate',
  コンポーネント:
    同期子
  },
  データ （） {
    戻る {
      オブジェクト: {
        名前: 'zhangsan'、
        年齢: 18
      },
      メッセージ: 'こんにちは'
    }
  }
}
</スクリプト>

<テンプレート>
  <div style="background-color: pink;">
    <div>
      <span>名前を変更:</span>
      <!-- ここで、バインディング値は value です。これは、入力が主にプロパティ データを表示するために使用され、実際の変更はサブコンポーネント内にないためです。サブコンポーネントは変更トリガー ソースとしてのみ使用されます -->
      <!-- 入力イベントをトリガー ソースのエントリ ポイントとしてバインドします -->
      <input type="text" :value="childObj.name" @input="updateObj($event, 'name')">
    </div>
    <div>
      <span>年齢を変更:</span>
      <input type="text" :value="childObj.age" @input="updateObj($event, 'age')">
    </div>
    <div>
      <span>メッセージを変更:</span>
      <input type="text" :value="msg" @input="updateMsg($event.target.value)">
    </div>
  </div>
</テンプレート>

<スクリプト>
// ここでは lodash ツールライブラリの cloneDeep ディープコピーメソッドを紹介します // 公式ドキュメントアドレス https://www.lodashjs.com/
'lodash' から { cloneDeep } をインポートします

エクスポートデフォルト{
  名前: 'emitUpdateChild',
  小道具: {
    オブジェクト: {
      タイプ: オブジェクト、
      デフォルト: () => {}
    },
    メッセージ: {
      タイプ: 文字列、
      デフォルト： ''
    }
  },
  データ （） {
    戻る {
      // ここでは、prop の obj がディープ コピーによってコピーされます。主な目的は次の通りです。
      // 1. 異なるメモリアドレスを使用して 2 つのオブジェクト (参照型) を区別します // 2. 子コンポーネントのレンダリング/変更/返却を容易にするために、オブジェクト内のすべての値を保持します childObj: cloneDeep(this.obj)
    }
  },
  メソッド: {
    // 親コンポーネントに obj を更新するよう通知する
    updateObj ($event, キー) {
      // 入力値と、更新する必要がある childObj 内の対応する属性を受け取ります // 次に、childOBj を更新して親コンポーネントに渡します // 親コンポーネントは、取得した childObj をデータの obj に直接更新できます this.childObj[key] = $event.target.value
      this.$emit('update:obj', this.childObj)
    },
    // 親コンポーネントにメッセージの更新を通知する
    更新メッセージ (新しい値) {
      this.$emit('update:msg', newVal)
    }
  }
}
</スクリプト>

<テンプレート>
  <div style="background-color: skyblue;">
    <h3>prop をデータに割り当てて変更する</h3>
    <div>親オブジェクト:{{ obj }}</div>
    <div>親メッセージ:{{ メッセージ }}</div>
    <dataChild :obj="obj" :msg.sync="msg" />
  </div>
</テンプレート>

<スクリプト>
'./components/dataChild' から dataChild をインポートします。

エクスポートデフォルト{
  名前: 'dataUpdate',
  コンポーネント:
    データ子
  },
  データ （） {
    戻る {
      オブジェクト: {
        名前: 'zhangsan'、
        年齢: 18
      },
      メッセージ: 'こんにちは'
    }
  }
}
</スクリプト>

<テンプレート>
  <div style="background-color: pink;">
    <div>
      <span>名前を変更:</span>
      <!-- ここでは、prop をデータに直接割り当てているため、v-model の双方向バインディングを直接使用してデータを変更できます -->
      <input type="text" v-model="dataObj.name">
    </div>
    <div>
      <span>年齢を変更:</span>
      <input type="text" v-model="dataObj.age">
    </div>
    <div>
      <span>メッセージを変更:</span>
      <!-- ウォッチ リスナーを通じて実装できる基本データ型を変更する別の方法を示します -->
      <input type="text" v-model="dataMsg">
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'dataChild',
  小道具: {
    オブジェクト: {
      タイプ: オブジェクト、
      デフォルト: () => {}
    },
    メッセージ: {
      タイプ: 文字列、
      デフォルト： ''
    }
  },
  データ （） {
    戻る {
      // 参照データ型が直接割り当てられると、それは浅いコピーとなり、メモリアドレスのみがコピーされ、一方を変更するともう一方に反映されます。dataObj: this.obj、
      // 基本データ型を直接割り当てると、値がコピーされ、一方を変更してももう一方には影響しません。dataMsg: this.msg
    }
  },
  時計：
    // ここでは、データからコピーされた dataMsg をリッスンし、変更されたら、emit を実行して親コンポーネントに dataMsg (newVal) を更新するように通知します。{
      this.$emit('update:msg', newVal)
    }
  }
}
</スクリプト>

<テンプレート>
  <div style="background-color: skyblue;">
    <h3>計算プロパティの監視を通じてプロパティを変更する</h3>
    <div>親オブジェクト:{{ obj }}</div>
    <div>親メッセージ:{{ メッセージ }}</div>
    <computedChild :obj="obj" :msg.sync="msg" />
  </div>
</テンプレート>

<スクリプト>
'./components/computedChild' から computedChild をインポートします。

エクスポートデフォルト{
  名前: 'computedUpdate',
  コンポーネント:
    計算された子
  },
  データ （） {
    戻る {
      オブジェクト: {
        名前: 'zhangsan'、
        年齢: 18
      },
      メッセージ: 'こんにちは'
    }
  }
}
</スクリプト>

<テンプレート>
  <div style="background-color: pink;">
    <div>
      <span>名前を変更:</span>
      <!-- ここでは、算出プロパティを通じて prop を直接リッスンしているので、v-model の双方向バインディングを直接使用してデータを変更できます -->
      <input type="text" v-model="computedObj.name">
    </div>
    <div>
      <span>年齢を変更:</span>
      <input type="text" v-model="computedObj.age">
    </div>
    <div>
      <span>メッセージを変更:</span>
      <!-- 基本データ型を変更する別の方法は、計算プロパティのセッターを通じて実現できます -->
      <input type="text" v-model="computedMsg">
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'computedChild',
  小道具: {
    オブジェクト: {
      タイプ: オブジェクト、
      デフォルト: () => {}
    },
    メッセージ: {
      タイプ: 文字列、
      デフォルト： ''
    }
  },
  計算: {
    計算されたオブジェクト() {
      // ここでは、参照データ型objが直接返されます。この時点で、computedObjはobjと同等です。
      // これは浅いコピーなので、メモリアドレスのみがコピーされ、一方を変更するともう一方に反映されます。 return this.obj
    },
    計算されたメッセージ: {
      得る （） {
        // プロパティが更新されるたびに、計算プロパティのゲッターメソッドがトリガーされ、最新の値が取得されます // 基本データ型を直接返す場合、値がコピーされ、一方を変更してももう一方には影響しません。 return this.msg
      },
      設定(新しい値) {
        // ここでは、計算プロパティのセッターメソッドを使用して、値が変更されたときにエミットをトリガーし、親コンポーネントに値を更新するように通知します。this.$emit('update:msg', newVal)
      }
    }
  }
}
</スクリプト>