Vue.js でミックスインを使用する手順の詳細な説明

今回は、Vue.jsでMixinsを使用する手順について詳しく説明します。Vue.jsでMixinsを使用する際の注意事項について、実際のケースを見てみましょう。

非常によくあるシナリオ: 2 つの非常に似た基本的な機能がありますが、それらの間には十分な違いがあります。それらを 2 つの完全に異なるコンポーネントに分割する必要がありますか? それとも別のコンポーネントを作成する必要がありますか?基本的なコンポーネントを作成し、使用シナリオを簡単に区別できるように十分なプロパティを定義しますか?

どちらのアプローチも完璧ではありません。これらを 2 つの完全に異なるコンポーネントに分離すると、要件の変更 (機能の変更) の際に両方のコンポーネントを同時に変更する必要が生じるリスクが高まる可能性があります。 その一方で、これは「DRY」の前提に違反します。プロップが多すぎると、すぐに乱雑になり、メンテナー、さらには自分自身に負担を強いることになります。 これらの小道具を使用する前に、そのコンテキストを理解しなければならないのは、非常に残念なことです。

Vue のミックスインは、プログラミングの非常に実用的な方法です。究極の実用的なプログラミングとは、可動部分を継続的に減らしてコードを理解しやすくすることだからです。 (この点については、Michael Feathers が優れた 引用 をしています)。ミックスインを使用すると、機能をカプセル化できます。 ミックスインが正しく作成されていれば、アプリケーション全体のさまざまなコンポーネントで使用できるようになります。 これらは純粋です - 関数の範囲外でコンテンツを変更したり変更したりしないため、入力値が同じである限り、複数の場所で実行できます。 常に同じ結果が非常に確実に得られます。これは非常に強力です。

Mixins をご紹介します

ミックスインは、Vue コンポーネントで再利用可能な機能を配布するための非常に柔軟な方法です。ミックスイン オブジェクト には、任意のコンポーネント オプションを含めることができます。 mixin オブジェクトをコンポーネントとして使用する場合、mixin オブジェクトのすべてのオプションはコンポーネント自体のオプションに混合されます。

栗

状態のブール値、モーダル、ツールチップを切り替えることを仕事とするいくつかの異なるコンポーネントがあるとします。 これらのツールチップとモーダルには、この機能を除いて、あまり共通点がありません。見た目も使い方も異なりますが、ロジックは似ています。

//modal
const Modal = {
 template: '#modal',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
//tooltip
const Tooltip = {
 template: '#tooltip',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

そこからロジックを抽出し、再利用可能なパーツを作成できます:

const toggle = {
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
const Modal = {
 template: '#modal',
 mixins: [toggle]
};
 
const Tooltip = {
 template: '#tooltip',
 mixins: [toggle]
};

duang — 小さくてシンプルな :chesnut: Mixin は、いくつかの再利用可能な関数をカプセル化するのに非常に興味深く、便利で、実用的であることをお知らせします。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がVue.js でミックスインを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。