コンポーネントパラメータの受け渡しの旅に乗り出す準備はできていますか? それはまさに「ルー・ヤオは馬力を知っている」です。ゆっくり時間をかけて、この分野を一緒に探索しましょう！
まず、コンポーネントのパラメーター受け渡しの基本構文を理解する必要があります。Vue では、コンポーネントのプロパティを表すために「props」という言葉を使用します。これらのプロパティは、「v-bind」ディレクティブを介して親コンポーネントにバインドすることも、親コンポーネントで直接定義することもできます。
例として、「name」というプロパティを持つ「Greeting」という子コンポーネントがあるとします。次に、親コンポーネントで次のように定義できます。
<template>
<greeting :name="parentName"></greeting>
</template>
<script>
export default {
data() {
return {
parentName: "世界"
}
}
}
</script>
この例では、「v-bind」ディレクティブを使用して、「parentName」を「Greeting」コンポーネントの「name」プロパティにバインドします。これにより、「Greeting」コンポーネントはテンプレート内でこの属性を使用できるようになります。
次に、子コンポーネントでこのパラメーターを使用する方法を見てみましょう。子コンポーネントでは、「props」オプションを通じてこのプロパティを宣言できます。例えば：
import Vue from 'vue'
export default Vue.extend({
props: ['name'],
template: `
<div>
<h1>Hello {
{ name }}!</h1>
</div>
`
})
この例では、「name」属性を宣言し、テンプレートでそれを使用します。このように、「Greeting」コンポーネントは、親コンポーネントから渡されたパラメータに従って、さまざまな挨拶を表示できます。
もちろん、コンポーネントのパラメーターを渡す際には、注意すべき詳細がたくさんあります。たとえば、属性名は、camelCase (キャメルケース) や Snake_case (アンダースコア区切り) 形式ではなく、ケバブケース (ハイフン接続) 形式にする必要があります。さらに、プロパティではデフォルト値、タイプ、バリデーターなどを設定することもできます。これらの詳細を詳しく知りたい場合は、Vue の公式ドキュメントの「コンポーネント パラメーターの検証」セクションを確認してください。
次に、さらに興味深い例をいくつか見てみましょう。「Image」という子コンポーネントがあり、このコンポーネントには、表示される画像のパスを表す「src」というプロパティがあるとします。次に、親コンポーネントで次のように定義できます。
<template>
<image :src="imageSrc"></image>
</template>
<script>
export default {
data() {
return {
imageSrc: "/static/images/example.jpg"
}
}
}
</script>
この例では、画像のパスを「Image」コンポーネントの「src」プロパティにバインドします。このように、「画像」コンポーネントはテンプレート内のこの属性を使用して画像を表示できます。例えば：
import Vue from 'vue'
export default Vue.extend({
props: ['src'],
template: `
<div>
<img :src="src">
</div>
`
})
この例では、テンプレートの「src」属性を使用して画像を表示します。もちろん、実際のニーズに応じて、他の属性や関数を追加することもできます。たとえば、「alt」属性を追加して画像の代替テキストを設定したり、「resize」メソッドを追加して画像のサイズを変更したりできます。全体として、これは非常に柔軟なコンポーネントであり、ニーズに応じてその動作をカスタマイズできます。
ここで、別の興味深い例を見てみましょう。これは、ユーザーの詳細を表す「user」というプロパティを持つ「User」というサブコンポーネントです。親コンポーネントで次のように定義できます。
<template>
<user :user="currentUser"></user>
</template>
<script>
export default {
data() {
return {
currentUser: {
name: "张三",
age: 30,
email: "[email protected]"
}
}
}
}
</script>
この例では、現在のユーザーの詳細を「User」コンポーネントの「user」プロパティにバインドします。このように、「User」コンポーネントはテンプレート内のこの属性を使用して、ユーザーの個人情報を表示できます。例えば：
import Vue from 'vue'
export default Vue.extend({
props: ['user'],
template: `
<div>
<h2>{
{ user.name }}</h2>
<p>年龄: {
{ user.age }}</p>
<p>邮箱: {
{ user.email }}</p>
</div>
`
})
この例では、テンプレートの「user」属性のさまざまな属性を使用して、ユーザーの詳細を表示しています。もちろん、実際のニーズに応じて他の属性や機能を追加することもできます。たとえば、「avatar」属性を追加してユーザーのアバターを設定したり、「followedProjects」属性を追加してユーザーがフォローしているプロジェクトのリストを表示したりできます。全体として、これは非常に柔軟なコンポーネントであり、ニーズに応じてその動作をカスタマイズできます。