ホームページ > 記事 > ウェブフロントエンド > vue.js のミックスインとは何ですか
vue.js のミックスインとは何ですか
- coldplay.xixiオリジナル
- 2020-11-11 10:30:182350ブラウズ
vue.js ミックスインは、再利用可能なメソッドまたは計算されたプロパティの一部を定義します。ミックスイン オブジェクトには、任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用する場合、ミックスのすべてのオプションは、 in object はコンポーネント自体に混合されます。
このチュートリアルの動作環境: Windows10 システム、vue2.4.2、この記事はすべてのブランドのコンピューターに適用されます。
【おすすめ関連記事: vue.js】
Mixins (ミックスイン) は、再利用可能なメソッドや計算の属性の一部を定義します。ミックスインには、任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用する場合、ミックスイン オブジェクトのすべてのオプションはコンポーネント自体のオプションに混合されます。
簡単な例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
// 定义一个混入对象
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write("欢迎来到混入实例");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>オプションのマージ:
コンポーネントとミックスイン オブジェクトに同じ名前のオプションが含まれている場合、これらはオプションは適切な組み合わせ方法でマージされます。
たとえば、データ オブジェクトは内部で再帰的にマージされ、コンポーネント データと競合する場合はコンポーネント データが優先されます。
注:
(1) さまざまな属性値を含む混合オブジェクトにデータ属性を設定します。コンポーネントにもデータ属性があるため、混合オブジェクトのデータとコンポーネントオブジェクトの値はマージされ、同名のコンポーネントデータは制限されます;
(2) 同名のフック関数が呼び出され、混合されたオブジェクトのフックが前に呼び出されますコンポーネント独自のフック;
Global mixin
形式は次のとおりです:
Vue.mixin({ // 混入函数 })注意!グローバル ミックスイン オブジェクトを使用すると、後で作成されるすべての Vue インスタンスに影響します。適切に使用すると、カスタム オブジェクトに処理ロジックを組み込むことができます。
関連する無料学習の推奨事項: JavaScript (ビデオ)
以上がvue.js のミックスインとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。