VueでMixinsを管理する方法

私たちのvueプロジェクトの機能がますます多くなると、似たようなコンポーネントがあれば、同じデータ、方法、watchを何度もコピーして貼り付けていることに気づくかもしれません.もちろん、これらのすべての個別のファイルを個別のコンポーネントとして作成し、propを使用してカスタマイズを試みることができますが、こんなに多くのpropsを使用すると混乱しやすく、分かりにくいです.この問題を回避するために、多くの人は重複するコードを追加し続けるだけですが、自分がもっと良い解決策があると感じています.
幸いなことに、vueはmixinを導入してこのような常に解決し、mixinは異なるコンポーネント間で再利用可能なコードを共有する最も簡単な方法の一つである.Mixinオブジェクトは、data、mounted、created、updateなどの任意のコンポーネントオプションを使用できます.Mixinオブジェクトのすべての情報は、Mixinを使用するとコンポーネントにブレンドされます.次に、コンポーネントは、コンポーネント自体で宣言されたようにmixinのすべてのオプションにアクセスする権利があります.次に、例を使用して、イメージの深さを説明します.

// mixin.js file
export default {
   data () {
      msg: ‘Hello World’
   },
   created: function () {
      console.log('    mixin   create     ！')
   },
   methods: {
      displayMessage: function () {
         console.log(‘    mixin      ！’)
      }
   }
}

// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})
// => "    mixin   create     ！"
// => {msg: ‘Hello World’}
// => "    mixin      ！"

我々が見たように、mixinを使用した後、このコンポーネントはmixin内のすべてのデータを含み、thisを使用してmxin内のデータと方法にアクセスすることができる.また、mixinを個別のファイルではなく変数を使用して定義することもできます.率直に言って、これはmixinに関する多くの知識を理解する必要がありますが、いくつかの使用例と特殊な状況を理解するのに役立つと思います.
 
名前の競合が発生した場合はどうすればいいですか?
mixinのデータ、メソッド、またはコンポーネントのオプションがコンポーネントのオプションと同じ名前である場合、コンポーネントとそのmixinとの名前の競合が発生する可能性があります.この場合、コンポーネント自体のプロパティが優先されます.たとえば、コンポーネントとmixinの両方にtitleデータ変数がある場合.titleは、次のようにコンポーネントで定義された値を返します.

// mixin.js file
export default {
   data () {
      title: ‘Mixin’
   }
}
// -----------------------------------------------------------

// main.js file
import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}
// => "Component"

 
まとめ
一般的に、Vueのmixinについては、まだ多くのことを理解していますが、これらの知識は開発に十分です.Vueのグローバルmixinやカスタムマージ設定など、より高度なトピックを理解するには、Vueドキュメントでこれらの情報を参照してください.