Vue.js基础-13-混入对象（应用示例，同名函数优先级，选项合并，选项优先级，全局混入，Vue.mixin）
文章目录
1. 混入对象
1.1 简单应用
语法示例
- 定义混入对象
var 混入对象名 = {
created: 操作
};
- 组件中引用混入对象
new Vue({
component: {
mixins: [混用对象名],
}
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-song</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">
new Vue({
el: "#databinding",
component: {
mixins: [myMixin],
}
});
// 定义一个混入对象
var myMixin = {
created: document.write("混入实例"),
};
</script>
</body>
</html>
1.2 定义一个组件引用混入对象
语法示例
- 定义混入对象
var 混入对象名 = {
created: 操作
};
- 定义一个组件来扩展vue实例
var 组件名 = Vue.extend({
mixins: [myMixin],
});
- 初始化组件实例
new 组件名();
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-song</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",
});
// 定义一个混入对象
var myMixin = {
created: document.write("混入实例"),
var Component = Vue.extend({
mixins: [myMixin],
});
new Component();
</script>
</body>
</html>
2.3 混入对象使用函数
示例（在混入对象中直接定义函数）
将上例替换如下：
var myMixin = {
created: function () {
document.write("混入实例");
},
};
示例（混入对象引用methods中函数）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-song</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 () {
//引用methods中函数
this.startmixin();
},
methods: {
startmixin: function () {
document.write("混入实例");
},
},
};
var Component = Vue.extend({
mixins: [myMixin],
});
var component = new Component();
</script>
</body>
</html>
2. 同名函数优先级（vue实例 VS 混入对象）
2.1 选项合并（实例下直接选项）
说明
Vue 实例与混入对象包含了相同的方法。两个函数将合并，并且一起输出。
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-宋</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 mixin = {
created: function () {
document.write("混入调用" + "<br>");
},
};
new Vue({
mixins: [mixin],
created: function () {
document.write("组件调用" + "<br>");
},
});
</script>
</body>
</html>
- 结果输出
混入调用
组件调用
2.2 选项优先级（实例下methods的选项）
说明
Vue实例和混入对象实例中的methods下有同名函数，则Vue实中的methods下的同名函数优先级高
完整示例
说明：
- 混入对象：methods中包含两个方法，一个无同名的（mixinfunction），一个和vue实例中同名的（samemethod）。
- vue实例：methods包含两个方法，一个无同名的（vmfunction），一个和混入对象中同名的（samemethod）。
按预期，mixinfunction、vmfunction和vue实例中的 samemethod 将被打印出来
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-SONG</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 mixin = {
methods: {
mixinfunction: function () {
document.write("混入对象中的方法" + "<br>");
},
samemethod: function () {
document.write("混入对象中的同名方法" + "<br>");
},
},
};
var vm = new Vue({
mixins: [mixin],
methods: {
vmfunction: function () {
document.write("Vue实例中的方法" + "<br>");
},
samemethod: function () {
document.write("Vue中同名方法" + "<br>");
},
},
});
vm.mixinfunction();
vm.vmfunction();
vm.samemethod();
</script>
</body>
</html>
- 结果显示
混入对象中的方法
Vue实例中的方法
Vue中同名方法
3. 全局混入
- 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CROW-SONG</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.vueOption;
document.write(myOption);
},
});
new Vue({
vueOption: "HELLO !",
});
</script>
</body>
</html>
- 结果显示
HELLO !
