欢迎加入QQ讨论群258996829
苹果6袋
麦子学院
Vue.js可复用性与组合详解
发布时间：2018-04-22 22:09 回复:0 查看:3317 最后回复：2018-04-22 22:09
Vue.js是web
前端开发中非常重要的框架之一，本文和大家分享的是Vue.js可复用性和组合相关内容，希望对大家
学习前端知识有所帮助。
在实际的应用中，有很多的业务代码是可以重复使用的，vue.js
本身是一个注重于高效率的框架，所以也提供了组件中的复用功能。混入
(mixins)
是一种分发
Vue
组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。如下：
//
定义一个混入对象
var mixinTest = {
created:
function () {
this.mixinMethod()
},
methods: {
mixinMethod:
function () {
console.log('mixinMethod from mixin!')
}
}
}
//
定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [mixinMethod]
})
var component =
new Component() // => "hello from mixin!"
组件和混入对象含有同名选项时
从中可以发现当组件混入对象时，对象的方法以及钩子都被混入了该组件的本身。这种方式是很灵活的。那要是组件和混入对象含有同名选项时，也是有规则的，比如，当数据上和组件有同名时，以组件的数据为先。
var mixin = {
data:
function () {
return {
testA: 'aaaa',
testB: 'bbbb'
}
}
}
new Vue({
mixins: [mixin],
data:
function () {
return {
testA: 'AAAA',
testC: 'CCCC'
}
},
created:
function () {
console.log(this.$data)
// => { testA: "AAAA", testB: "bbbb", testC: "CCCC" }
}
})
mixins
对象里的
testA
和
testB
混入到了组件中的
data
中，同时出现了
testA
与组件同名，所以优先保留了组件的数据。
混入对象与组件具有同名钩子函数时
var mixin = {
created:
function () {
console.log('
混入对象的钩子
')
}
}
new Vue({
mixins: [mixin],
created:
function () {
console.log('
组件的钩子
')
}
})
// => "
混入对象的钩子
"// => "
组件的钩子
"
可以发现混入对象的钩子和组件的钩子都会执行，但是会先执行混入对象的钩子
值为对象的选项时，例如：methods，components等的时候
var mixin = {
methods: {
mixinsMethod:
function () {
console.log('mixinsMethod')
},
sameMethod:
function () {
console.log('from mixin')
}
}
}
var
vm =
new Vue({
mixins: [mixin],
methods: {
selfMethod:
function () {
console.log('selfMethod')
},
sameMethod:
function () {
console.log('from self')
}
}
})
vm.mixinsMethod() // => "mixinsMethod"
vm.selfMethod() // => "selfMethod"
vm.sameMethod() // => "from self"
由上可得，在值为对象的混入对象混入时，这些将和组件原有的选项混合一起成为一个对象，当对象的键名与组件的键名出现重复时，会使用组件的键名。
全局混入
以上列举的都是单独的引入到某一个组件中使用。也可以全局注册混入对象。这样的话所有的实例就都会被混入的对象所作用。也可以根据自己需要做成一个具体的使用工具类。供全局所有的实例使用。不过也要小心使用，毕竟会影响到所有的组件，需要结合实际场景使用。
Vue.mixin({
created:
function () {
var option =
this.$options.text
if (option) {
console.log(option)
}
}
})
new Vue({
text: 'globalMixins!'
})// => "globalMixins!"
来源：网络