vue でカプセル化されたコンポーネントを参照する方法-フロントエンドQ&A-php.cn

vue でカプセル化されたコンポーネントを参照する方法

PHPz

リリース： 2023-04-12 09:08:08

オリジナル

722 人が閲覧しました

フロントエンドフレームワークの継続的な開発に伴い、Vue.js を使用して Web アプリケーションを構築する開発者が増えています。 Vue.js では、コンポーネントは Web アプリケーションを構築するための中心的な概念の 1 つです。 Vue.js コンポーネントにより、コードがよりモジュール化され、再利用可能になり、保守が容易になり、テストが容易になります。コンポーネントのカプセル化は Vue.js の重要な機能の 1 つで、再利用可能なコードと状態をコンポーネントと呼ばれる別のモジュールにカプセル化して、プログラムのさまざまな部分で再利用できるようにします。この記事では、カプセル化されたコンポーネントを参照する方法について説明します。

コンポーネントの作成

まず、Vue コンポーネントを作成する必要があります。コンポーネントを作成する前に、コンポーネントの名前、プロパティ、メソッドなどを決定する必要があります。この記事では、単純なボタンコンポーネントを例として、カプセル化されたコンポーネントを参照する方法を示します。このボタンコンポーネントには、btnClass と btnText という 2 つのプロパティがあります。btnClass はボタンのクラス名の指定に使用され、btnText はボタンのテキストコンテンツの指定に使用されます。ボタンコンポーネントのサンプルコードは次のとおりです。

<template>
  <button :class="btnClass">{{ btnText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    btnClass: {
      type: String,
      default: '',
    },
    btnText: {
      type: String,
      default: '',
    },
  },
};
</script>

ログイン後にコピー

コンポーネントをグローバルコンポーネントとして登録します

アプリケーション内の任意の場所でコンポーネントを使用するには、コンポーネントを登録する必要があります。グローバルコンポーネントとして。これにより、コンポーネントをどこからでも参照できるようになります。コンポーネントを使用する必要があるファイルでは、テンプレート内のコンポーネント名を使用するだけです。コンポーネントをグローバルコンポーネントとして登録するには、Vue.component() メソッドを使用するだけです。以下はサンプルコードです:

import Vue from 'vue';
import MyButton from './components/MyButton.vue';

Vue.component('MyButton', MyButton);

ログイン後にコピー

コンポーネントを登録するとき、コンポーネントの名前とコンポーネントファイルへのパスを宣言する必要があります。

コンポーネントをローカルコンポーネントとして登録する

グローバルコンポーネントとは異なり、ローカルコンポーネントは登録場所とそのサブコンポーネントでのみ使用できます。この方法は、同じ親コンポーネントを持つ複数の子コンポーネントで同じコンポーネントを使用する必要がある場合に適しています。次のサンプルコードでは、コンポーネントをローカルコンポーネントとして登録します。

<template>
  <div>
    <MyButton btnClass="primary" btnText="Click me"></MyButton>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  name: 'MyView',
  components: { MyButton },
};
</script>

ログイン後にコピー

ローカルコンポーネントを登録する場合、コンポーネントが登録されているコンポーネントのコンポーネントオプションでコンポーネントを宣言する必要があります。

外部コンポーネントの導入

コンポーネントファイルをコンポーネントディレクトリに配置し、コンポーネントを使用する必要があるファイル (App.ビュー）。このコンポーネントを使用する必要がある場合は、テンプレート内で使用するだけです。以下に示すように:

import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton,
  },
};

ログイン後にコピー

もちろん、import() 関数を使用してコンポーネントを動的にロードする、または Vue.component() メソッドを使用してコンポーネントを追加するなど、コンポーネントを参照する他の方法もあります。実際の状況に応じて最適な方法を選択してください。

概要

Vue.js は強力なフロントエンドフレームワークであり、そのコンポーネントシステムは Web アプリケーションを構築するための中心的な概念の 1 つです。 Vue.js のカプセル化されたコンポーネントにより、コードがよりモジュール化され、再利用可能になり、保守とテストが容易になります。アプリケーションでコンポーネントを参照するには、コンポーネントの名前を登録し、そのコンポーネントを使用する必要があるファイルにその名前を導入する必要があります。コードをよりモジュール化して再利用可能にし、コードの冗長性を減らします。この記事がお役に立ち、Vue.js コンポーネントの使用にさらに習熟できることを願っています。

以上がvue でカプセル化されたコンポーネントを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。