オブジェクト指向の観点から 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: