Vue CLI でカスタム コンポーネントを使用する方法

Vue.js フレームワークでは、カスタム コンポーネントを使用すると、プロジェクトの開発効率が大幅に向上します。 Vue CLI は、Vue.js に基づいてプロジェクトを迅速に構築するためのスキャフォールディング ツールです。Vue CLI の迅速な開発プロセスにより、開発者はより迅速にプロジェクトを構築できます。この記事では、Vue CLI でカスタム コンポーネントを使用する方法を紹介します。

1. Vue プロジェクトの作成

まず、ターミナルで次のコマンドを入力して Vue プロジェクトを作成します:

vue create <project-name>

その中に、<project- name> はプロジェクト名で、カスタマイズできます。コマンドを入力したら、ターミナルのプロンプトに従って選択を行い、プロジェクトが作成されるまで待ちます。

2. カスタム コンポーネントの作成

Vue CLI でカスタム コンポーネントを作成するには、src/components フォルダーに xxx.vue ファイルを作成する必要があります (xxx は次のように置き換えることができます)。カスタム ファイル名とファイルの内容は通常次のようになります。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'xxx',
  props: {
    title: String,
    content: String,
  },
};
</script>

<style>
</style><p> このうち、<code><template></code> タグはコンポーネントのテンプレートを指定するために使用されます。 <code><script></code> タグはコンポーネントのメソッド、<code><style></code> タグはコンポーネントの CSS スタイルです。 </p>
<p>このファイルでは、<code>title</code> と <code>content</code> という 2 つのプロパティを含む <code>xxx</code> という名前のコンポーネントを定義します。これら 2 つのプロパティはコンポーネント内では文字列型であり、コンポーネントを使用するときに対応するパラメータを渡す必要があります。 </p>
<p>3. カスタム コンポーネントの使用</p>
<p>Vue CLI でカスタム コンポーネントを使用するには、次の手順が必要です: </p>
<ol><li>カスタム コンポーネントを必要なコンポーネントにインポートします</li></ol>
<p>カスタム コンポーネントを使用するには、それを使用する必要があるコンポーネントにインポートする必要があります。ここでは App.vue コンポーネントを例として、コンポーネントを開いてカスタム コンポーネントをコンポーネントにインポートできます。 </p>
<pre class="brush:php;toolbar:false"><template>
  <div>
    <xxx :title="pageTitle" :content="pageContent"></xxx>
  </div>
</template>

<script>
import xxx from '@/components/xxx.vue';  // 将组件导入

export default {
  name: 'App',
  components: {
    xxx,  // 注册组件
  },
  data() {
    return {
      pageTitle: '自定义组件页面',
      pageContent: '欢迎使用自定义组件',
    };
  },
};
</script>

<style>
</style>

このコンポーネントでは、カスタム コンポーネントをコンポーネントにインポートし、 # Pass data into に渡します。 ##:title と :content を使用したカスタム コンポーネント。

コンポーネント内でカスタム コンポーネントを使用する

カスタム コンポーネントをインポートするときは、必要なコンポーネントを Vue に登録する必要があります。 App.vue コンポーネントの

xxx を例に挙げると、登録方法は次のとおりです。

export default {
  name: 'App',
  components: {
    xxx,  // 注册组件
  },
  data() {
    return {
      pageTitle: '自定义组件页面',
      pageContent: '欢迎使用自定义组件',
    };
  },
};

このようにして、カスタマイズしたコンポーネントをコンポーネント内で使用できます。

4. 概要

上記の手順により、Vue CLI でカスタム コンポーネントを正常に使用できるようになります。カスタム コンポーネントの利点は、再利用可能で管理やメンテナンスに便利であり、プロジェクト開発効率も向上できることです。 Vue プロジェクトを開発している場合は、カスタム コンポーネントの使用を試してみると、多くの助けになると思います。

以上がVue CLI でカスタム コンポーネントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。