Vue コンポーネントの紹介

概要

大規模なアプリケーションを開発する場合は、コードを読みやすく、構造化し、保守しやすくするために、小さなコンポーネントに分割することをお勧めします。 ほとんどの Vue 初心者は、コンポーネントとは何かを少なくとも概念的に理解していますが、できることとできないことを完全には理解していない可能性があります。

このガイドでは、Vue のコンポーネントとは何か、それがどのように機能するか、それらを介してデータとイベントを渡す方法などを見ていきます。

Vue コンポーネントとは?

コンポーネント テンプレート、スタイル、JavaScript 要素を含む Vue 要素の再利用可能なインスタンスです。 各コンポーネントは、各 HTML 要素が「独自のもの」であるのと同様に「独自のもの」であり、Vue コンポーネントと HTML 要素の両方を使用して、それらを Web ページの構成要素として使用できます。

Vue コンポーネントは、自分で定義および操作できる JavaScript が組み込まれた HTML 要素と考えることができます。

典型的な Vue アプリケーションは、必要に応じて何度でも再利用できる多数のコンポーネントで構成されています。

たとえば、通常の Web サイトには、ナビゲーション バー、ヘッダー、フッターなど、すべてのページに表示されるセクションがあります。 したがって、それぞれを個別のコンポーネントにすることをお勧めします。 このようにして、適切に構造化された、読みやすく、再利用可能で、保守が容易なコードを作成しています。

Vue コンポーネントを作成する方法

プロジェクトの作成方法に応じて、Vue コンポーネントを作成する基本的な方法が XNUMX つあります。 ビルド設定の有無にかかわらず. 最初のケースでは、すべてのコンポーネントが個別のファイルに保存されます。 XNUMX 番目のケースでは、XNUMX つのファイルに複数のコンポーネントが存在する可能性があります。

ビルド設定で Vue コンポーネントを作成する

ほとんどのプロジェクトは、 ビルドのセットアップ、これにより、単一ファイル コンポーネントを作成できます (SFC) – 専用のコンポーネント ファイル .vue 拡大。 これにより、Vue コンポーネントのテンプレート、ロジック、およびスタイリングを単一のファイルにカプセル化できます。

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

ビルド設定なしで Vue コンポーネントを作成する

何らかの理由で、次のようなパッケージマネージャーを使用できない場合 npm マシンに Vue をインストールする場合でも、アプリで Vue を使用できます。 Vue を使用する建物の代替 npm 経由でVueをインストールすることです CDN（コンテンツ配信ネットワーク） アプリで直接。 Vue コンポーネントを作成するこの方法について簡単に説明しましょう。

ビルドなしで Vue をインストールすると、プレーンな JavaScript と同じように、Vue 固有の機能を使用できるようになります。 構文は、通常の SFC で見られるものと多少似ています。

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

このガイドでは、 SFC 構文これは、コンポーネントを作成する最も一般的な方法です。

コンポーネントを Vue に登録する方法

これまで、Vue でコンポーネントを作成する方法を見てきました。 次のステップは、これらのコンポーネントを別のコンポーネント内で使用することです (親子階層).

そのためには、まず使用するコンポーネントを登録する必要があります。 この登録では、コンポーネントをインポートしてから登録する必要があります。 そうするためのXNUMXつのオプションがあります - 全体的な および ローカル登録.

Vue コンポーネント – グローバル登録

グローバルに登録されたコンポーネントは、その名前が示すように、グローバルに利用できます。つまり、再度インポートすることなく、アプリケーションの任意のコンポーネントで使用できます。 これは、 app.component() 方法：

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

多くのコンポーネントがある状況では、次のことができます。 チェーン それらをこのように：

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

コンポーネントを登録したら、次の構文を使用して、このアプリケーション内の任意のコンポーネントのテンプレートでそれらを使用できます。

<ChildComponent/>
<ProfileComponent/>

Vue コンポーネント – ローカル登録

ほとんどの場合、ローカル登録を使用します。これにより、登録済みコンポーネントの可用性の範囲を限定できるからです。 これらのコンポーネントをインポートしてから、 components オプションはこれを実現します:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

コンポーネントに名前を付けるときは、 キャメルケース これがテンプレートのネイティブ HTML 要素ではなく、Vue コンポーネントであることを明確にするため。 これにより、JavaScript でのコンポーネントのインポートと登録も簡単になります。

Vue コンポーネントを介してデータを渡す方法

コンポーネントを作成する利点の XNUMX つは、コードをモジュール化することでコードを再利用できることです。

プロファイル ページから各生徒のデータを受け取る必要があるユーザーのプロファイル コンポーネントを作成しているとします。 この場合、このデータをプロファイル コンポーネント (親コンポーネント) からユーザー プロファイル コンポーネント (子コンポーネント) に渡す必要があり、小道具を使用します。

小道具

props は、コンポーネントに登録できるカスタム属性であるため、親コンポーネントから子コンポーネントにデータを渡すことができます。 props script タグ内のオプション:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

スロット

Vue スロットは、あるコンポーネントから別のコンポーネントにあらゆるタイプのコンテンツを渡すことを可能にする予約済みのスペースです。 これにより、小道具とは異なり、親コンポーネントが子コンポーネント内のコンテンツを制御するため、小道具よりも集中的な制御が可能になります。 たとえば、次のボタンを作成できます。

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

次に、このコンポーネントを好きな場所で使用して、必要なコンテンツを提供できます。 コンテンツを指定しないと、指定したデフォルト値が使用されます (Click Me):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Vue コンポーネントからイベントを発行する方法

props は、親コンポーネントから子コンポーネントにデータを送信するために使用されることを学びました。 しかし、子コンポーネントから親コンポーネントに何かを送信する方法があるかどうか疑問に思うかもしれません。 そして答えは はい、イベントは子コンポーネントから親コンポーネントにも送信できます。

親コンポーネント (App.vue) 単一の子コンポーネント (MyBlogPost.vue）。 さらに、子コンポーネントには、タイトルを変更するボタンが含まれています。

関数がトリガーされるように、ボタンがクリックされたときにページのタイトルを変更したいとします。

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

子コンポーネントは次のようになります。

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

まとめ

このガイドでは、Vue を使用するすべての人にとって不可欠な、Vue でコンポーネントを操作する方法を学びました。 また、データを送受信する方法と、イベントを発行する方法も学びました。

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://stackabuse.com/introduction-to-vue-components/