Vue コンポーネントが prop プロパティを渡したり受け取ったりする方法

Vue コンポーネントが prop 属性を渡したり受け取ったりする方法には、特定のコード例が必要です。

Vue は、フロントエンド開発で広く使用されている人気の JavaScript フレームワークです。 Vue では、コンポーネントはアプリケーションを構築するための基本単位です。コンポーネントはプロパティ (props) を渡したり、プロパティ (props) を受信したりできるため、コンポーネント間のデータ対話が可能になります。この記事では、Vue コンポーネントが prop 属性をどのように受け渡しするかを詳しく紹介し、具体的なコード例を示します。

prop 属性の受け渡し

Vue では、component タグで v-bind ディレクティブを使用して prop 属性を渡すことができます。 v-bind ディレクティブは、1 つ以上のプロパティを式に動的にバインドするために使用されます。以下は、文字列型の prop 属性を渡す方法を示す例です。

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  data() {
    return {
      parentMessage: "Hello from parent"
    };
  },
  components: {
    ChildComponent
  }
};
</script>

上記のコードでは、親コンポーネントは message という名前の prop 属性を子コンポーネントに渡し、バインドされています。親コンポーネントの parentMessage データに追加します。

子コンポーネントでは、props オプションでプロパティを宣言することで、渡された prop プロパティを受け取ることができます。以下は、サブコンポーネントのコード例です。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

上記のコードでは、message という名前のプロパティが props オプションで宣言されており、その型は次のように指定されています。文字列。 required: trueこの属性が必須であることを示します。親コンポーネントがこの属性を渡さない場合、コンソールに警告が出力されます。

プロパティ属性の受信

プロパティ属性が子コンポーネントで宣言されると、それを子コンポーネントのテンプレートで使用できるようになります。以下は、子コンポーネントで prop 属性を受け取って使用する方法を示す例です。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

上記のコードでは、{{ message }} は、次のテンプレートに表示するために使用されます。子コンポーネント 渡された prop 属性。子コンポーネントには「Hello fromparent」と表示されます。

prop 属性が宣言され、子コンポーネントで使用されると、読み取り専用プロパティとみなされます。子コンポーネント内の prop 属性の値を変更しようとすると、Vue はコンソールに警告を出力します。

デフォルト値

prop 属性のデフォルト値を設定できます。親コンポーネントがこの属性を渡さない場合は、デフォルト値が使用されます。以下は例です:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

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

子コンポーネントでは、default オプションを使用してデフォルト値を設定できます:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "Default message"
    }
  }
};
</script>

上記のコードでは、親コンポーネントがmessage 属性を渡さない場合、子コンポーネントには Default message が表示されます。

概要:

この記事では、Vue コンポーネントが prop 属性を送受信する方法を紹介し、具体的なコード例を示します。 Vue では、v-bind ディレクティブを使用して prop プロパティを子コンポーネントに渡すことができ、子コンポーネントは props オプションでこれらのプロパティを宣言して使用することでプロパティを受け取ることができます。さらに、prop プロパティのデフォルト値を設定できます。この知識を習得すると、開発者はコンポーネント開発をより効率的に実行し、コンポーネント間のデータ対話を実現できるようになります。

以上がVue コンポーネントが prop プロパティを渡したり受け取ったりする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。