VUE3 入門チュートリアル: Vue.js プラグインを使用して星評価コンポーネントをカプセル化する

Web アプリケーションでは、商品、サービス、その他のコンテンツを評価するために星評価コンポーネントがよく使用されます。開発者が使いやすくするために、Vue.js コミュニティにはすでに多くの星評価コンポーネント プラグインが用意されていますが、星評価コンポーネント プラグインを自分でカプセル化する必要もあります。この記事では、コンポーネントを記述する従来の方法を放棄し、Vue.js 3 の複合 API を紹介し、Vue.js プラグインを使用して星評価コンポーネントをカプセル化する方法を説明します。

まず、Composition API について学びましょう。構成 API には主に次の利点があります。

1. ロジックのカプセル化の改善: ライフ サイクルやオプション API に従ってプロパティやメソッドを定義するのではなく、ロジックに従ってロジックをグループ化できるようになりました。さらに、単一責任の原則に従ってグループ化できるため、コードの保守とテストが容易になります。
2. ロジックの再利用が容易になる: ロジックをカスタム フックにカプセル化すると、コンポーネント内での共有と再利用が簡単になり、他の開発者と共有したり、他の人が使用できるように npm で配布したりすることもできます。
3. より直感的なコンポーネント コード: ロジックが小さなチャンクに分割されているため、コードがより直感的で理解しやすくなり、不必要なマークアップやネストが減り、コンポーネントの役割を推測しやすくなります。
4. より優れた型推論:Composition API は TypeScript と緊密に統合されているため、開発者は TypeScript の型推論機能を利用して、より堅牢なコードを作成できます。

次に、Composition API を使用して、星評価コンポーネントを設計および実装します。

ステップ 1: Vue.js プラグインを作成する

プラグインは、Vue.js の基礎となる構造の拡張です。 Vue.js プラグインは Vue.js アプリケーションにグローバル レベルの機能を提供できるため、共通のコンポーネントやディレクティブの実装に適しています。 Vue.js プラグインを作成してインストールする基本的な手順は次のとおりです。

1. JavaScript オブジェクトを作成し、そのオブジェクト内にインストール メソッドを定義します。このメソッドは Vue をパラメータとして受け取り、新しい Vue() インスタンスのスコープ内で新しいコンポーネントまたは他の関数を登録します。
2. インストール メソッドでコンポーネントまたはその他のユーティリティを定義します。
3. Vue で静的な use() メソッドを呼び出し、インストールする必要があるプラグインを含むオブジェクトを渡します。 Vue.js はこのオブジェクトの install メソッドを呼び出し、Vue.js インスタンスをパラメータとしてメソッドに渡します。

サンプル コードは次のとおりです。

// 定义插件对象
const StarRating = {
  install: function(Vue) {
    // 在install方法中注册全局组件 star-rating
    Vue.component('star-rating', {
      // 组件选项
    })
  }
}

// 调用Vue.use()方法安装插件
Vue.use(StarRating)

ステップ 2: コンポーネントのプロパティとイベントを設計する

Composition API では、次の使用をお勧めします。 reactive() メソッドを使用してコンポーネントの状態を定義します。 computed() メソッドを使用してコンポーネントの派生状態を計算し、watch() メソッドを使用してコンポーネントの状態の変化を監視します。プロパティとエミットを介してデータをより適切に渡すために、reactive() を使用してプロパティとイベント オブジェクトを定義できます。

コンポーネントには次の属性が必要です:

• rated: 現在の評価
• maxRating: 最大評価数
• starSize: スター サイズ
• padding: 星の間の間隔
• showRating: 評価を表示するかどうか

コンポーネントには次のイベントが必要です:

• update : 評価が更新されると自動的にトリガーされます。

プロパティとイベント オブジェクトを定義するサンプル コードは次のとおりです。

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        return {
          state,
          updateRating
        }
      }
    })
  }
}

ステップ 3: コンポーネント UI を実装する

次に、テンプレート コードを使用してコンポーネントの UI を実装します。 Vue.js3 では setup() 関数を使用してコンポーネントのステータスとイベントを設定し、テンプレート内の補間式と命令を使用してコンポーネント UI をレンダリングします。

以下はコンポーネント UI を実装するサンプル コードです:

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        const stars = []
        for (let i = 0; i < state.maxRating; i++) {
          stars.push(i < state.rating ? 'star' : 'star_border')
        }

        return {
          state,
          updateRating,
          stars,
        }
      },
      template: `
        <div>
          <i 
            v-for="star in stars"
            :key="star"
            :class="[star]"
            :style="{
              'font-size': state.starSize + 'px', 
              'padding-right': state.padding + 'px',
            }"
            @click="updateRating(stars.indexOf(star) + 1)"
          ></i>
          <span v-if="state.showRating">{{state.rating}}/{{state.maxRating}}</span>
        </div>
      `
    })
  }
}

v-for ディレクティブを使用して星のレンダリングをループし、i タグと FontAwesome フォント アイコンを使用して星のアイコンをレンダリングしました。 。このようにして、ユーザーの選択に基づいて評価を更新できます。

ステップ 4: コンポーネントの使用

これで、星評価コンポーネント プラグインの開発が完了しました。このプラグインを Vue.js アプリケーションにグローバルにインストールし、任意のコンポーネント テンプレートで使用できます。

Vue.js アプリケーションでコンポーネントを使用するためのサンプル コード:

const app = Vue.createApp({})
app.use(StarRating)

app.component('my-component', {
  data() {
    return {
      rating: 3
    }
  },
  template: `
    <div>
      <star-rating 
        :max-rating="5" 
        :show-rating="true"
        :rating="rating"
        @update="rating = $event"
      />
    </div>
  `
})

app.mount('#app')

このサンプル コードでは、StarRating プラグインを Vue.js アプリケーションに登録し、my-component スコアリング コンポーネントに追加しました。コンポーネントで使用されます。 my-component コンポーネントでは、$event パラメーターを使用して更新イベントの新しい評価値にアクセスします。

結論

Composition API は、Vue.js コンポーネント開発に多くの新機能をもたらします。これらの新機能を Vue.js プラグイン メカニズムと組み合わせて使用​​すると、コンポーネントのカプセル化と再利用が容易になります。この記事では、Composition API と Vue.js プラグインを使用して星評価コンポーネントを開発する方法を段階的に学びました。これらのテクニックを使用して、独自のコンポーネント プラグインを開発およびパッケージ化できるようになりました。

以上がVUE3 入門チュートリアル: Vue.js プラグインを使用して星評価コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。