ホームページ > 記事 > ウェブフロントエンド > vue.js ミックスインとは何ですか?
vue.js ミックスインとは何ですか?
- 青灯夜游オリジナル
- 2020-11-23 11:01:301704ブラウズ
vue.js でのミキシングは、Vue コンポーネントで再利用可能な関数を配布するメソッドまたは計算プロパティです。目的: 1. コンストラクターを作成した後、メソッドまたは一時的なアクティビティを追加する必要があります。メソッドを使用する場合、ミキシングソースコードの汚染を軽減します; 2. パブリックメソッドを使用する場合、混合メソッドを使用すると、コードの量を削減し、コードの再利用を実現できます。
- #この方法は、すべてのブランドのコンピューターに適しています。
ミックスインには通常 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:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
mixins:[addLog]//混入
})
</script>
</body>
</html>
ミックスインの呼び出しシーケンス
updated:function(){
console.log("构造器里的updated方法。")
},この時点で、コンソール出力の順序は次のとおりです: コンストラクターの更新されたメソッドに変更します。
グローバル API ミックスイン メソッド
Vue.mixin({
updated:function(){
console.log('我是全局被混入的');
}
})PS: グローバル ミキシングの実行順序は、ミックスとコンストラクターのメソッドの前です。
関連する推奨事項:プログラミング関連の知識の詳細については、
プログラミング入門をご覧ください。 ！
以上がvue.js ミックスインとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。