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

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

青灯夜游

リリース： 2020-11-23 11:01:30

オリジナル

1718 人が閲覧しました

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 サイトの他の関連記事を参照してください。