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

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

coldplay.xixi

リリース： 2020-11-30 14:25:28

オリジナル

2415 人が閲覧しました

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

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

このチュートリアルの動作環境: 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: &#39;#databinding&#39;,
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

形式は次のとおりです: