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

<!-- 親コンポーネント -->
<テンプレート>
  <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)
      }
    }
  }
</スクリプト>

<テンプレート>
  <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)
    }
    戻る {
      父に言う、
    }
  },
})
</スクリプト>
<スタイル></スタイル>