ホームページ >ウェブフロントエンド >Vue.js >vue.js ミックスインとは何ですか?

vue.js ミックスインとは何ですか?

青灯夜游
青灯夜游オリジナル
2020-11-23 11:01:301750ブラウズ

vue.js でのミキシングは、Vue コンポーネントで再利用可能な関数を配布するメソッドまたは計算プロパティです。目的: 1. コンストラクターを作成した後、メソッドまたは一時的なアクティビティを追加する必要があります。メソッドを使用する場合、ミキシングソースコードの汚染を軽減します; 2. パブリックメソッドを使用する場合、混合メソッドを使用すると、コードの量を削減し、コードの再利用を実現できます。

vue.js ミックスインとは何ですか?

  • #この方法は、すべてのブランドのコンピューターに適しています。

ミックスインは、再利用可能なメソッドまたは計算プロパティの一部を定義します。ミックスインには、任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用する場合、ミックスイン オブジェクトのすべてのオプションはコンポーネント自体のオプションに混合されます。

ミックスインには通常 2 つの用途があります:

1. コンストラクターを作成した後、一時的なアクティビティ用のメソッドを追加する必要があります。時間が経つとソースコードの汚染が軽減されます。

2. パブリック メソッドは多くの場所で使用されており、混合方法を使用することでコード量を削減し、コードの再利用を実現できます。

Mixins の基本的な使い方

これで、クリックして数値をインクリメントするプログラムが完成しました。これが完成したとして、データが更新されるたびに、変更 「データが変更されました」というプロンプトをコンソールに出力できます。

コード実装プロセス:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="../assets/js/vue.js"></script>
  <title>Mixins Option Demo</title>
</head>
<body>
  <h1>Mixins Option Demo</h1>
  <hr>
  <div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加数量</button></P>
  </div>
 
  <script type="text/javascript">
    //额外临时加入时,用于显示日志
    var addLog={
      updated:function(){
        console.log("数据放生变化,变化成"+this.num+".");
      }
    }
    var app=new Vue({
      el:&#39;#app&#39;,
      data:{
        num:1
      },
      methods:{
        add:function(){
          this.num++;
        }
      },
      mixins:[addLog]//混入
    })
  </script>
</body>
</html>

ミックスインの呼び出しシーケンス

実行順序に関しては、混合されたものが最初に実行され、次にコンストラクター内のものが実行されますが、これはメソッドのオーバーライドではなく、両方で実行されることに注意してください。

上記のコードのコンストラクターでは、更新されたフック関数も追加しました:

updated:function(){
   console.log("构造器里的updated方法。")
},

この時点で、コンソール出力の順序は次のとおりです:


mixins data 変更をリリースし、2.

コンストラクターの更新されたメソッドに変更します。

PS: 混合メソッドとコンストラクター メソッドが同じ名前の場合、混合メソッドは表示できません。つまり、動作しません。

グローバル API ミックスイン メソッド

グローバル ミックスインを定義することもできます。これにより、js を直接導入することでこの機能を実現できます。コードが必要です。グローバル ミキシング メソッドを見てみましょう:

Vue.mixin({
  updated:function(){
    console.log(&#39;我是全局被混入的&#39;);
  }
})

PS: グローバル ミキシングの実行順序は、ミックスとコンストラクターのメソッドの前です。

関連する推奨事項:


2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、

プログラミング入門をご覧ください。 !

以上がvue.js ミックスインとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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