Vue サブコンポーネントに属性を割り当てる方法について話し合う

Vue は、Web アプリケーションで再利用可能なコンポーネントを迅速かつ簡単に構築できるようにする人気の JavaScript フレームワークです。リアクティブ プログラミング モデルとテンプレート構文を通じてコン​​ポーネント拡張を実装します。この記事は、Vue サブコンポーネントにプロパティを割り当てる方法を探ることを目的としています。

Vue サブコンポーネント

Vue アプリケーションは 1 つ以上のコンポーネントで構成されます。 Vue コンポーネントは階層構造に従い、ルート コンポーネントから始まり、より小さなコンポーネントに分割されて、階層コンポーネント構造を形成します。 Vue では、コンポーネント間のデータ転送は親子コンポーネント通信によって完了します。

子コンポーネントは、親コンポーネントによって呼び出されるコンポーネントです。親コンポーネントは、プロパティを子コンポーネントに渡すことによって子コンポーネントを構成できます。

Vue サブコンポーネントのプロパティ割り当て

Vue は、プロパティの受け渡しを通じてデータをサブコンポーネントに渡す便利な方法を提供します。親コンポーネントは、props を通じて子コンポーネントにデータを渡すことができます。子コンポーネントは、受け入れたい props を宣言することで親コンポーネントからデータを取得できます。

例:

親コンポーネント App.vue 内:

<template>
  <div>
    <Child :name="name" :age="age" />
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    Child
  },
  data() {
    return {
      name: 'Tom',
      age: 22
    }
  }
}
</script>

子コンポーネント Child.vue 内:

<template>
  <div>
    <p>My Name is {{ name }}</p>
    <p>My age is {{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    name: String,
    age: Number
  }
}
</script>

上記のコードでは、子コンポーネント Child が props を通じて 2 つのプロパティ、name と age を定義していることがわかります。このプロパティ定義により、プロパティは親コンポーネントから子コンポーネントにデータを渡すことができます。親コンポーネント App.vue は、プロパティ バインディングを通じて子コンポーネント Child.vue にデータを渡します。これは次の方法で実行できます。

<Child :name="name" :age="age" />

この時点で、子コンポーネント Child.vue は次のデータを取得できます。親コンポーネント App.vue から取得した属性名と属性年齢のデータ。

結論

Vue では、親コンポーネントは属性の受け渡しを通じて子コンポーネントにデータを渡すことができ、子コンポーネントは属性を受け入れることを宣言することで親コンポーネントからデータを取得できます。この記事では主にVueのサブコンポーネントにプロパティを割り当てる方法を紹介します。この記事の概要が、Vue の使用にさらに習熟するのに役立つことを願っています。

以上がVue サブコンポーネントに属性を割り当てる方法について話し合うの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。