Vue でサードパーティのコンポーネントをエレガントにカプセル化するにはどうすればよいですか?梱包方法の紹介-Vue.js-php.cn

Vue でサードパーティのコンポーネントをエレガントにカプセル化するにはどうすればよいですか?梱包方法の紹介

青灯夜游

リリース： 2022-04-20 09:59:38

転載

2517 人が閲覧しました

vue でサードパーティのコンポーネントをエレガントにカプセル化するにはどうすればよいですか?次の記事では、例を使用して、Vue でサードパーティコンポーネントをよりエレガントにカプセル化する方法を検討します。

Vue でサードパーティのコンポーネントをエレガントにカプセル化するにはどうすればよいですか?梱包方法の紹介

1. 需要シナリオの説明

実際の開発においては、やり直しを減らし、作業効率を向上させ、開発時間とコストを節約するために、 Web フロントエンドで非常に人気のある element-ui などの UI コンポーネントライブラリを使用することは避けられません。ただし、画像コンポーネントなど、元のコンポーネントに基づいていくつかの変更を加える必要がある場合があります。画像の読み込みに失敗したときに表示される特定の画像を統一し、コンポーネントを使用するたびに追加する必要があります。面倒で時間がかかる、要はメンテナンスコストが高い、間違って読み込まれたイメージを更新する必要がある場合、このコンポーネントが再度使用される場所を見つけて変更する必要があります。 (学習ビデオ共有: vuejs チュートリアル) 別の例は、これも非常に一般的なカスタムページングコンポーネントで、コンポーネントのスタイルとページごとのページ数がデフォルトでサポートされています。カプセル化と再利用は、保守性と開発効率の点で有益です。ただし、ページングコンポーネントを最初から作成する必要はなく、元のベースでカプセル化するだけです。では、サードパーティのコンポーネントライブラリのコンポーネントを迅速かつエレガントにカプセル化するにはどうすればよいでしょうか? v-bind="

attrs" および v-on="

2. 主要な技術ポイントの紹介

Vue でサードパーティのコンポーネントをエレガントにカプセル化するにはどうすればよいですか?梱包方法の紹介 1.v-bind="$attrs"

v -bind="$attrs" の素晴らしい使い方は、上位レベルのコンポーネントを作成することです。サード・パーティのコンポーネントをカプセル化するとき、

は親スコープで使用される v-bind 属性を自動的にバインドできます。そして、v-bind="$attrs" を使用して、カプセル化されたコンポーネントを渡します。

vue 公式 Web サイトからの抜粋の紹介

親スコープの props として認識 (および取得) されない属性が含まれています

バインディング (クラスとスタイル)を除外する）。コンポーネントが prop を宣言していない場合、

これにはすべての親スコープバインディング (クラスとスタイルを除く) が含まれ、

v-bind="$attrs" インポート内部を介して渡すことができます。コンポーネント - 高レベルのコンポーネントを作成する場合に便利です。

たとえば、カプセル化されたカスタムイメージコンポーネントに v-bind="$attrs" を使用した後、また、el-image のほぼすべてのプロパティが Custom-Image コンポーネントにあります。また、その効果と使い方は el-image を使用する場合と同じです。つまり、el-imageの記事を見ればcustom-Imageが使えるということになります。

2.v-on="$listeners"

v-on=" $# ＃リスナー＃ ##s " の機能と使い方は v - b## と同じです # i n d = 「 listeners」の機能と使い方は、 v-bind=" l i s# と同じ ##t e n$ $s$
v-on="$listeners" を介して内部コンポーネントに渡すことができます。これは、より高いレベルのコンポーネントを作成するときに非常に便利です。

vue 公式 Web サイトからの紹介文

3. el-image をカプセル化するコード例

カスタムイメージコンポーネントの使用例

<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>

ログイン後にコピー

el-image をカスタム画像コンポーネントにカプセル化する例

<template>
  <div id="CustomImage">
    <el-image v-bind="$attrs" v-on="$listeners">
      <div slot="error">
        <img :src="require(&#39;image-f/icon-empty-img.png&#39;)" alt="图片加载失败.png"/>
      </div>
      <div slot="placeholder">加载中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: &#39;CustomImage&#39;
}
</script>

<style scoped>
  #CustomImage {
  .image-slot {
    text-align: center;
  }

  .placeholder-slot {
    text-align: center;
  }
}
</style>

ログイン後にコピー

(学習ビデオ共有: Web フロントエンド開発、プログラミング入門)

以上がVue でサードパーティのコンポーネントをエレガントにカプセル化するにはどうすればよいですか?梱包方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。