vue mixin と extends の使用方法

今回は、vue mixin と extends の使い方、vue mixins と extends を使用する際の 注意事項 についてお届けします。実践的な事例を紹介しますので、見てみましょう。

vue はミックスインを提供し、設定項目を拡張します。これは最近使用すると非常に便利であることがわかりました。

ミックスインと継承拡張

公式ドキュメントの内容を見てください。実際、Mixins はオブジェクト 配列 を受け取り (多重継承として理解できます)、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の属性、メソッド内のメソッド、および計算された値には同じ継承ルールがあります。

mixin、拡張、拡張を個別に紹介しましょう

ミックスイン

呼び出し方法: mixins: [mixin1, mixin2]

これは、メソッド、コンポーネント、ディレクティブなどを含む親コンポーネントの拡張です。 。 。

フック関数がトリガーされると、最初にミックスインの関数が呼び出され、次に親コンポーネントの関数が呼び出されます。

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

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

延長します

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

これもミックスインと同様に親コンポーネントの拡張ですが、優先度は親コンポーネントよりも劣ります

延長

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

vue.component('a', {...}) を呼び出すと自動的に呼び出されます

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

axios クライアントの Ajax リクエスト メソッド

vue.js vue-router によりユーザー エクスペリエンスが向上

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