vue での mixin と extends の使用方法の詳細な紹介

vue はミックスインを提供し、設定項目を拡張します。これは最近使用すると非常に便利であることがわかりました。次に、この記事を通じて Vue のミックスインと拡張機能の賢い使い方を紹介します。必要な方は参考にしてください。Vue にはミックスインと拡張機能の設定項目があり、私が最近使用していると非常に便利です。

ミックスインと継承の extends

公式ドキュメントの内容を見てください。実際、ミックスインはオブジェクトの配列を受け取り (多重継承として理解できます)、extends はオブジェクトまたはオブジェクトを受け取ります。関数（単一継承であると理解できます）。

継承されたフック関数

const extend = {
 created () {
  console.log('extends created')
 }
}
const mixin1 = {
 created () {
  console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
  console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}

コンソール出力

extends created
mixin1 created
mixin2 created
created

結論: mixins および extends から継承された親クラスが最初に呼び出され、キューと比較してより高い優先度で extends がトリガーされます
push( extend、mixin1、minxin2、独自のフック関数)
テスト後、watchの値継承ルールは同じです。

メソッドの継承

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

結論: サブクラスが再度宣言されると、どちらのサブクラスであっても、データ内の変数が書き換えられます。
サブクラスが宣言されていない場合、データ内の変数は最後に継承された親クラスに基づきます。
テスト後、props内の属性、メソッド内のメソッド、および計算された値の継承ルールは同じです。
以下は、mixins、extends、extendの別の紹介です

mixinsメソッドの呼び出し: mixins: [mixin1, mixin2]

は、メソッド、コンポーネント、指示など。 。

フック関数をトリガーするときは、最初に mixins 関数を呼び出し、次に親コンポーネント関数を呼び出します。

ミックスイン作成時にデータ属性やテンプレート属性を追加することもできますが、親コンポーネントにもこの属性がある場合は親が優先されますので、この点からも製作者の意図（拡張）がわかります。

データ、メソッドの内部関数、コンポーネント、ディレクティブなどのキー/値形式のオブジェクトはすべて親コンポーネント/インスタンスに基づいています

extendsメソッドの呼び出し: extends: CompA

も拡張です親コンポーネント。ミックスインに似ていますが、親コンポーネントよりも優先度が低くなります

extend 拡張コンポーネントのコンストラクター

は、vue.component('a', {. ..})

extend のデータは関数であることに注意してください

上記は、皆さんのためにまとめたものであり、将来的に皆さんのお役に立つことを願っています。

関連記事:

Angularでテーブルソートを実装する方法

Angularで検証を実装する方法

JavaScriptの使用法でオブジェクト値をマージする方法について

JavaScriptの疑似配列の使用法について(詳細なチュートリアル)

以上がvue での mixin と extends の使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。