Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明

vue3 が誕生してからかなり時間が経ち、筆者も最近になって vue3 を学び始めました。 vue2 と比較すると、vue3 は記述面で大きな変更が加えられています。最も典型的な例は、vue3 が ref または reactive を通じてデータ応答性を実装していることです。 ref と reactive の登場により、Vue3 では親コンポーネントと子コンポーネント間で値を渡す方法も変更されました。

まずvue2でどのように書くかを見てみましょう

親コンポーネント:

<!-- 親コンポーネント -->
<テンプレート>
  <div>
    <children :title="タイトル" @getChildren="getChildren"></children>
    <div>子コンポーネントは次のように言います: {{ childrenAsk }}</div>
  </div>
</テンプレート>
 
<スクリプト>
  「./children.vue」から子要素をインポートします。
  エクスポートデフォルト{
    データ（） {
      戻る {
        タイトル: 「私は親コンポーネントから渡された値です」
        子供たちに質問: ""
      }
    },
    メソッド: {
      getChildren(val) {
        this.childrenAsk = val
      }
    }
  }
</スクリプト>

サブコンポーネント:

<!-- 子コンポーネント -->
<テンプレート>
  <div>
    <div>親コンポーネントから渡された値: {{ title }}</div>
    <button @click="askToFather">クリックすると親コンポーネントに送信されます</button>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    小道具: {
      タイトル：
        タイプ: 文字列
      }
    },
    データ（） {
      戻る {
        askMsg: 「これは親コンポーネントに言ったことです」
      }
    },
    メソッド: {
      父親に尋ねる() {
        this.$emit("getChildren", this.askMsg)
      }
    }
  }
</スクリプト>

vue2 では、子コンポーネントから親コンポーネントへの値の転送は this.$emit を通じて実装されていますが、vue3 ではこれが存在しません。vue3 では、データと関数の両方が setup にカプセル化されていますが、vue3 はどのように実装しているのでしょうか?

vue3 の setup は 2 つのパラメータを受け取ることがわかっています。最初のパラメータは props で、親コンポーネントから子コンポーネントに渡される props 値です。2 番目の値は context で、現在のコンテキストオブジェクトを表します。これがわかったので、vue3 の親子コンポーネント値の転送を実装できます。

Vue3 の親子継承は、Vue2 の親子継承と同じです。ここでは詳しく説明しません。以下では、Vue3 の子親継承に焦点を当てます。

親コンポーネント

<テンプレート>
  <div style="color: aqua">親コンポーネント</div>
  <div>子コンポーネントは次のように言います: {{ children_msg }}</div>
  <children :title="メッセージ" @listen="子供の話を聞きます"></children>
  {{ 価値 }}
</テンプレート>
<script lang="ts">
「@/views/component_emit/children.vue」から子要素をインポートします。
「vue」から{defineComponent、ref}をインポートします。
エクスポートデフォルトdefineComponent({
  コンポーネント:
    子供たち、
  },
  名前:「父」、
  設定（） {
    let msg = "私は親コンポーネントです"
    let children_msg = ref("") // ref の機能は応答性を実装することです。ref がなければ応答性を実装できません (参照データ型は reactive を使用します)
    listenToChildren = (val) => { とします。
      children_msg.value = val // ref でラップされたデータを使用するには、.value の形式でその値にアクセスする必要があります}
    戻る {
      メッセージ、
      子供のメッセージ、
      listenToChildren、
    }
  },
})
</スクリプト>
<スタイル></スタイル>

サブコンポーネント:

<テンプレート>
  <div style="color: brown">サブコンポーネント</div>
  <!-- 親子の伝達方法はvue2と同じです-->
  <div>親コンポーネントから渡される値は: {{ title }}</div>
  <button @click="sayToFather">親コンポーネントに話しかける</button>
</テンプレート>
<script lang="ts">
「vue」から{defineComponent}をインポートします。
エクスポートデフォルトdefineComponent({
  名前:「子供」、
  小道具: {
    タイトル：
      タイプ: 文字列、
    },
  },
  セットアップ(プロパティ、コンテキスト) {
    // コンテキストの目的は、コンテキスト オブジェクトを取得することです。
    // セットアップがsetup(props, {emit})と書かれている場合、次のコンテキストは省略できます。const sayToFather = () => {
      const ask = "私は子コンポーネントです。親コンポーネントと対話します"
      context.emit("listen", ask)
    }
    戻る {
      父に言う、
    }
  },
})
</スクリプト>
<スタイル></スタイル>