VUE3 クイック スタート: Props を使用してデータをサブコンポーネントに渡す

VUE3 は最新の Vue.js バージョンで、パフォーマンス、エクスペリエンス、柔軟性の点で大幅に強化されています。この記事では、VUE3 の Props を使用して子コンポーネントにデータを渡す方法を学びます。

Vue.js は、コンポーネントに基づく MVVM (Model-View-ViewModel) フレームワークです。各コンポーネントにはローカル状態と可能なアクションがあるため、コンポーネント間の通信が重要です。 Vue.js では、親コンポーネントは Props を通じて子コンポーネントにデータを渡すことができ、子コンポーネントは渡された Props をリッスンすることでデータを受け取ります。

Props を使用してサブコンポーネントにデータを渡す前に、まず VUE3 のコンポーネント構文を理解する必要があります。 VUE3 では、コンポーネントは setup() 関数を通じてその動作を定義できます。 setup() 関数は、コンポーネントの状態と動作を含むオブジェクトを返します。

次のコードを見てみましょう。これは、含まれる子コンポーネントに単純な文字列を渡す単純な親コンポーネントです。

<template>
  <div>
    <child-component message="Hello World!"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

上記のコードでは、ChildComponent.vue を参照します。 、これは子コンポーネントです。親コンポーネントのテンプレート タグでは、message という名前の文字列を子コンポーネントに渡します。このプロパティは、子コンポーネントでもすぐに確認できます。

次に、ChildComponent.vue のコードを見てみましょう。

<template>
  <div>{{ childMessage }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const childMessage = props.message

    return {
      childMessage
    }
  }
}
</script>

上記のコードには、props オブジェクトがあります。 Props は、親コンポーネントから子コンポーネントにデータを渡す便利な方法を提供します。子コンポーネントでは、message というプロパティを定義します。これは文字列である必要があります。また、親コンポーネントに、必須のオプションを介してこの属性を渡すように強制します。

setup 関数では、すべての Props を含む props という名前のパラメーターを渡します。 props の message 属性を childMessage 変数に割り当て、子コンポーネントの状態の一部である childMessage を含むオブジェクトを返します。

最後に、テンプレートで、二重中括弧構文を使用して childMessage 変数をバインドします。

これは、Props を使用してデータをサブコンポーネントに渡すプロセス全体です。もちろん、実際のアプリケーションでは、より複雑なデータ転送およびレンダリング方法がある可能性がありますが、上記の例は Props の基本的な使用法と構文を説明するのに十分です。

概要

VUE3 の Props 関数と setup() 関数を使用してデータをサブコンポーネントに渡すのは、非常に簡単かつ柔軟です。 Props を使用すると、複雑なオブジェクトや配列だけでなく、単純な文字列、数値、ブール値なども渡すことができます。これにより、コンポーネント間の通信が簡単かつ自然になり、ワークフローが合理化されます。

この記事が役に立ち、VUE3 コンポーネントの構文と使用法をより深く理解できるようになることを願っています。

以上がVUE3 クイック スタート: Props を使用してデータをサブコンポーネントに渡すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。