ホームページ  >  記事  >  ウェブフロントエンド  >  vue.mixinの使い方

vue.mixinの使い方

coldplay.xixi
coldplay.xixiオリジナル
2020-11-16 11:38:362958ブラウズ

vue.mixin の使用方法: 1. 複数のコンポーネントでデータとメソッドを共有できます。mixin を使用してコンポーネントに導入された後、mixin 内のメソッドとプロパティもコンポーネントに組み込まれ、直接使用できます。使用方法; 2. 両方のフック関数が呼び出され、ミックスイン内のフックが最初に実行されます。

vue.mixinの使い方

[関連記事のおすすめ: vue.js]

vue.mixin の使用方法方法:

Vue は、コンポーネント コンテンツのより効率的な再利用を実現するために、混合メカニズム (ミックスイン) を提供します。最初は、これとコンポーネントに違いはないと思いました。 。後でそれが間違いだと分かりました。通常の状況におけるミックスインとインポートされたコンポーネントの違いを見てみましょう。

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

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

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

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

ミックスイン:

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

機能: 複数のコンポーネントがデータとメソッドを共有できます。ミックスインを使用してコンポーネントに導入された後、ミックスイン内のメソッドは次のようになります。プロパティはコンポーネントに組み込まれ、直接使用できるようになります。両方のフック関数が呼び出され、ミックスイン内のフックが最初に実行されます。

vue mixin の使い方を紹介します 具体的には次のとおりです:

1. js ファイル (mixin.js) を定義します

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2. vue ファイル内 mixin を使用するための無料学習に関する推奨事項

import mixin from '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

:JavaScript(ビデオ)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。