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

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

WBOY

リリース： 2023-06-16 08:23:31

オリジナル

1698 人が閲覧しました

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

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

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

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

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

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

JavaScript オブジェクトを作成し、そのオブジェクト内にインストールメソッドを定義します。このメソッドは Vue をパラメータとして受け取り、新しい Vue() インスタンスのスコープ内で新しいコンポーネントまたは他の関数を登録します。
インストールメソッドでコンポーネントまたはその他のユーティリティを定義します。
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: `
        
          
          {{state.rating}}/{{state.maxRating}}
        
      `
    })
  }
}

ログイン後にコピー

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: `
    
      
    
  `
})

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 サイトの他の関連記事を参照してください。