Vueのmixinとmixins

1275 ワード

mixin
mixinは、グローバル登録の混入であり、登録後に作成されたすべてのVueインスタンスに影響を与える.たとえば、メソッド、フィルタなどの共通のインスタンスをすべてのファイルに追加するプラグインの作成者は、ブレンドを使用して、コンポーネントにカスタムの動作を注入することができます.アプリケーションコードでの使用は推奨されません.
まずmixinを定義します.js
const mixin = {
  methods: {    
      two(num){
          return num*num
      }  
  }
}
export defaullt mixin 

メールでjsファイルグローバル導入
import mixin from './mixin'
Vue.mixin(mixin)

他のvueページではmixinで定義された方法を使用できます.たとえば、次のようにします.
 data() {
    return {
      name: "abc",
      square: this.two(3)
    }
  }

mixins
mixinsオプションは、混入オブジェクトの配列を受け入れます.これらの混入インスタンスオブジェクトは、通常のインスタンスオブジェクトと同様に、Vueに含まれるオプションを含むことができる.extend()では、最終的に同じオプションを使用して論理マージをマージすることを選択します.
mixinsと一般的なコンポーネントの導入の違いは何ですか?
コンポーネントは参照後、親コンポーネント内に個別の空間を開いて、親コンポーネントpropsからの値に基づいて対応する操作を行うことに相当し、本質的には両者ははっきりしており、相対的に独立している.mixinsは,コンポーネントを導入した後,dataなどのコンポーネント内部のコンテンツ,methodなどの属性を親コンポーネントに対応するコンテンツと統合する.導入後,親コンポーネントに相当する種々の属性メソッドが拡張された.
  • 単純コンポーネント参照:
  • 親コンポーネント+子コンポーネント>>親コンポーネント+子コンポーネント
  • mixins:
  • 親コンポーネント+子コンポーネント>>new親コンポーネント
  • 注意すべきはmixinsを使用する場合、親コンポーネントと子コンポーネントはサブコンポーネント内の様々な属性メソッドを同時に持っているが、これはこれらの変数を同時に共有し、同時に処理することを意味するものではなく、両者の間にはマージ以外に通信は行われない.