Vue の Mixin を一緒に学びましょう

はじめに

vue コンポーネントを作成するときに、いくつかのコンポーネントのロジックがほぼ類似していることがわかった場合は、vue のミックスイン (mixin) を使用して類似のロジックを抽出し、 js にカプセル化することができます。各コンポーネントに導入され、使用されます。

mixin は、vue コンポーネントの論理再利用の問題を解決するために使用されます。今日は Vue の mixin について学習します。

mixin

mixin は主に vue の js ロジックを再利用するためのものなので、通常は js ファイルです。

使用方法

最初に使用方法を見てみましょう

// name.js
export default {
  data () {
    return {
      name: 'mixin的name',
      obj: {name:'mixin', value:'mixin'}
    }
  },
  methods: {
    getName () {
      console.log('我是mixin,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是mixin的mounted')
    this.getName()
  }
}

その使用方法は vue コンポーネントの使用方法と同じです。たとえば、フック関数、メソッド、データなどです。

次に、それをコンポーネント内で使用し、mixins オプションを通じて導入します。

import name from './name.js'
export default {
  mixins: [name],
  data () {
  }
}

そこで、コンポーネント内に同じフック関数、同名のメソッド、同名のデータが定義されている場合、どちらが優先されるのかという疑問が生じます。上書きまたはマージしますか?

#例を見てみましょう

import name from './name.js'
export default {
  mixins: [name],
  data () {
    name: '组件的name',
    obj: {name:'component'}
  },
  methods: {
    getName () {
      console.log('我是组件,name:', this.name)
      console.log('obj:', this.obj)
    }
  },
  mounted () {
    console.log('我是组件的mounted')
    this.getName()
  }
}

出力された結果は次のとおりです:

#上記の結果から、それを確認できます。

フック関数が結合されて実行されます。 最初にミックスインのフック関数を実行し、次にコンポーネントのフック関数を実行します。

同名のデータについてはその都度ご相談ください

基本型の場合はミックスインのデータを上書きします同じ名前のコンポーネントです。

ただし、オブジェクトの場合は、

再帰的にキーを比較します。同じ名前のキーの場合は上書きされ、同じ名前でない場合は、保持されます。 メソッドについても同様で、同じ名前のミックスインのメソッドがコンポーネントのメソッドで上書きされます。

上記のオプションの他に、同様のロジックを持つ

components

(コンポーネント)、directives (命令) などのオプションもあります。同じ名前のものは上書きされ、Component で終わるものが優先されます。 mixin の悪い点

私が mixin を使用するプロセスの悪い点は、変数名が見つけにくいことと、変数名が mixin で定義されているとは考えにくいことです。

表示されるので、この変数名は未定義ですか?それが使用されている場所だけが見つかり、定義されている場所は見つからないのはなぜですか?

最後に、mixinの使い方を知って、ハッと気づきました。

推奨される学習: 「

vue ビデオ チュートリアル

」

以上がVue の Mixin を一緒に学びましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。