Vue の mixin とコンポーネントの違いは何ですか-フロントエンドQ&A-php.cn

Vue の mixin とコンポーネントの違いは何ですか

青灯夜游

リリース： 2022-12-13 18:34:10

オリジナル

2371 人が閲覧しました

ミックスインとコンポーネントの違い: コンポーネントが参照された後、親コンポーネント内に別のスペースを開いて、親コンポーネントの props からの値に基づいて対応する操作を実行するのと同じです。本質的に、この 2 つは依然として別個のものであり、比較的独立しています。コンポーネントが導入された後、ミックスインは、展開された親コンポーネントのさまざまな属性メソッドと同等であり、データやその他のメソッド、メソッドやコンポーネントなどのコンポーネントの内部コンテンツと同等になります。他の属性は、親コンポーネントの対応するコンテンツとマージされます。

Vue の mixin とコンポーネントの違いは何ですか

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

Mixin とは何ですか?

ミックスインは、Vue コンポーネントで再利用可能な機能を配布するための非常に柔軟な方法です。

混合オブジェクトには、任意のコンポーネントオプションを含めることができます。

コンポーネントがミックスインオブジェクトを使用すると、ミックスインオブジェクトのすべてのオプションがコンポーネント自体のオプションに混合されます。 [関連する推奨事項:

vuejs ビデオチュートリアル、Web フロントエンド開発 ]

mixin とコンポーネントの違い

コンポーネントが参照された後、親コンポーネント内に別のスペースを開いて、親コンポーネントの props からの値に基づいて対応する操作を実行することと同じです。本質的に、この 2 つは別のものです。そして比較的独立しています。

コンポーネントが導入された後、ミックスインは、データやその他のメソッド、メソッド、その他の属性などのコンポーネントの内部コンテンツを、親コンポーネントの対応するコンテンツとマージします。導入後、親コンポーネントの各種プロパティメソッドが拡張されたことに相当します。

単純なコンポーネントリファレンス:

親コンポーネントのサブコンポーネント>>>親コンポーネントのサブコンポーネント

mixins :

親コンポーネント子コンポーネント>>> 新しい親コンポーネント

これは、vue のパブリックメソッドを登録するのと似ています。 bound 複数のコンポーネントまたは複数の Vue オブジェクトインスタンスで使用されます。もう 1 つの点は、プロトタイプオブジェクトにメソッドを登録するのと似ています。インスタンスオブジェクト、つまりコンポーネントまたは Vue インスタンスオブジェクトでは、同じ関数名を持つメソッドを定義してオーバーライドすることができます。サブクラスと親クラス。

ミックスインと vuex の違い

ミックスイン: 共有変数を定義し、各コンポーネントで使用できます。コンポーネントに導入された後、、各変数は互いに独立しており、値の変更はコンポーネント内で相互に影響しません。オブジェクトが同じ場合、コンポーネントは状態管理に使用される mixins

vuex を上書きします。その中で定義された変数は、各コンポーネントで使用および変更できます。任意のコンポーネントでこの変数の値を変更した後、 other コンポーネント内のこの変数の値も変更されます。

ミックスインの使用

1. まず、elTableAdsorbent.js

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 显示页面中所有内容
    handleCount() {
      this.count++
  }
}

ログイン後にコピー

などの js ファイルを作成します。または

// 定义一个混入对象
    var myMixin = {
        data(){
            return{
                parent: 405
            }
        },
        mounted: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log(this.parent, 'hello from mixin!')
            }
        }
    }

ログイン後にコピー

2. 次に、この要件を必要とする vue ページにそれを導入し、

<el-button type="primary" @click="handleCount">{{count}}</el-button>
 
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
 
export default {
  mixins: [elTableAdsorbent],
  data() {
    return {}
  },
  created(){},
  methods:{}, 
  watch:{}
}

ログイン後にコピー

3 を使用します。同じ名前のフック関数は配列にマージされるため、すべてのフック関数が配列にマージされます。呼ばれる。さらに、ミックスインオブジェクトのフックは、コンポーネント自体のフックよりも前に呼び出されます。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

ログイン後にコピー

4. 2 つのオブジェクトのキー名が競合する場合、コンポーネントオブジェクトのキーと値のペアが取得されます。

var mixin = {
  methods: {
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.conflicting() // => "from self"

ログイン後にコピー

ミックスインのアプリケーション

var install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (options) {
    // 逻辑...
  }
}

ログイン後にコピー

(学習ビデオ共有:

vuejs 入門チュートリアル, プログラミングの基礎ビデオ)

以上がVue の mixin とコンポーネントの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。