オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討できます。コンポーネントの利点は、使用したいときに呼び出して、変更したいときにパラメータを渡すことができることです。

コンポーネントとは何か

オブジェクト指向の考え方を使用して Vue コンポーネントを理解すると、すべてのものをオブジェクトに抽象化でき、クラスまたはコンポーネントにはプロパティと操作が含まれます。

たとえば、人間を構成要素として抽出すると、その基本的な属性には名前、年齢、国籍が含まれ、基本的な方法には食べる、寝る、走るなどが含まれます。

<スクリプト>
エクスポートデフォルト{
    名前: '人'、
    小道具: {
        名前: {
            タイプ: 文字列、
            必須: false、
            デフォルト: '匿名'
        },
        年: {
            タイプ: 数値、
            必須: false、
            デフォルト: 0
        },
        国:
            タイプ: 文字列、
            必須: false、
            デフォルト: '地球人'
        }
    },
    メソッド: {
        食べる() {
            consloe.log('食べる')
        },
        寝る() {
            console.log('スリープ')
        },
        走る() {
            console.log('実行中')
        }
    }
}
</スクリプト>

オブジェクト指向プログラミングでは、コンストラクターはクラスのグローバル変数を初期化できるため、このアプローチはコンポーネントでも使用できます。

<person :age="20" :name="'シャオミン'" :country="'中国語'"></person>

コンポーネントはデータと操作をカプセル化します。入力されたものは出力されなければなりません。コンポーネント内で何が起こっているかを気にする必要はありません。必要なのは、結果と提示される効果だけです。

カスタムイベント

外部からコンポーネントのプロパティに直接アクセスできない場合はどうすればよいですか?

$emit カスタム イベントを使用すると、外部からコンポーネント プロパティを取得できます。

<テンプレート>
    ...
    <button @click="handleClick">クリック</button>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前: '人'、
    メソッド: {
        ハンドルクリック() {
            this.$emit('getPerson', {
                年齢: this.age,
                名前: this.name,
                国: this.country
            })
        }
    }
}
</スクリプト>

外部コンポーネントが呼び出されたら、カスタム関数@getPersonまたはv-on:click="getPerson"を追加します。

<テンプレート>
    <div>
        <person :age="20" :name="'シャオミン'" :country="'中国語'" @getPerson="getPerson"></person>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前: 'テスト',
    メソッド: {
        getPerson(情報) {
            console.log(情報)
        }
    }
}
</スクリプト>

実際の事例

Web 開発ではタグを使用することがありますが、タグはページ内で 1 回使用されるのではなく、複数回使用される可能性があると考えるかもしれません。さまざまな状況に合わせて、幅、高さ、色をカスタマイズすることもできます。

したがって、タグに関連する HTML コードと CSS をコンポーネントにカプセル化し、幅、高さ、およびタイプのパラメータを外部に公開することができます。使用時に、さまざまな状況に応じてカスタマイズする必要がある場合は、パラメータを渡すだけです。

<テンプレート>
    <表示
        :style="{ 幅: 幅、高さ: 高さ }"
        :class="['owl-tag-' + タイプ]"
        クラス="owl-tag text-xs flex align-center justify-center"
    >
        <スロット></スロット>
    </ビュー>
</テンプレート>

<スクリプト>
    名前: 'owl-tag',
    小道具: {
        // 渡すことができる有効な値は primary | gray です
        タイプ: {
            タイプ: 文字列、
            デフォルト: 'プライマリ'
        },
        幅: {
            タイプ: 文字列、
            必須: false
        },
        身長:
            タイプ: 文字列、
            必須: false
        }
    }
</スクリプト>

<スタイル>
.owlタグ{
    境界線の半径: 8rpx;
    パディング: 6rpx 10rpx;
}

.owl-tag-primary {
    色: 白;
    背景色: #87cefa;
}

.owl-tag-gray {
    色: #81868a;
    背景色: #f0f1f5;
}
</スタイル>

これらのタスクが完了すると、コンポーネントが定義されます。使いたいときに呼び出して、変更したいときにパラメータを渡すことができる。これがコンポーネントの利点です。

<テンプレート>
    <フクロウタグ
        :type="'プライマリ'"
        :height="'45rpx'"
        :width="'120rpx'"
    >
        公式投稿</owl-tag>
</テンプレート> 

type の値を gray に変更すると、次の効果が得られます。

これで、オブジェクト指向の考え方から Vue コンポーネントを理解するこの記事は終了です。より関連性の高い Vue コンポーネントのオブジェクト指向コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueは秒殺しのカウントダウンコンポーネントを実装する
  • Vue.js ドロップダウン コンポーネント付きテキストボックス
  • VueはSplitを使用して、ユニバーサルドラッグアンドスライドパーティションパネルコンポーネントをカプセル化します。
  • vite2.x は ant-design-vue@next コンポーネントのオンデマンド読み込みを実装します。
  • vue3.0 でカルーセル コンポーネントをカプセル化する手順
  • Vue.js ドラッグ可能なテキストボックスコンポーネントの使用方法の詳細な説明

<<:  Windows に WSL をインストールして構成する方法

>>:  MYSQLのバックアップデータのスケジュールクリアの特定の操作

推薦する

jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...

18 個のキラー JavaScript ワンライナー

序文JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に...

MySQL ビューの紹介と基本操作のチュートリアル

序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...

JavaScript におけるイベント バブリング メカニズムの詳細な分析

バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...

モバイルフロントエンド適応ソリューション(概要)

ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...

CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...

JSにおける4つのデータ型判定方法

目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...

CentOS 7にMySQLをインストールする詳細な手順

CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...

この記事は、Dockerにおけるcgroupの具体的な使用法を徹底的に理解するのに役立ちます。

目次cgroupとはcgroupの構成cgroupが提供する機能cgroup 内の CPU を制限す...

RedisとMySQLの違いを簡単に説明してください

MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...

Webフロントエンドベクターアイコンの使い方

序文フロントエンドページを書くとき、小さなアイコンなどの画像を使うことが多いです。画像を使うとコード...

JavaScript カラービューア

この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...