脚本宝典收集整理的这篇文章主要介绍了006-读书笔记-Vue官网 混合,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
当组件A中有一个方法methodCommon,组件B中同样有一个方法methodCommon,如果每个组件中都写这个方法,会出现很多重复性代码:
<!-- componentA.vue -->
<template>
<div>{{ methodCommon() }}</div>
</template>
<script>
export defautl {
methods: {
methodCommon() {
return 'this is a method ...'
}
}
}
</script>
<!-- componentB.vue -->
<template>
<div>{{ methodCommon() }}</div>
</template>
<script>
export defautl {
methods: {
methodCommon() {
return 'this is a method ...'
}
}
}
</script>
上面代码中的重复部分,可以抽取一个公共的mixin:
// mixin.js
export default {
methods: {
methodCommon() {
return 'this is a method ...'
}
}
}
然后在每一个组件中引入该mixin.js即可:
<!-- componentA.vue -->
<template>
<div>{{ methodCommon() }}</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [ mixin ]
}
</script>
<!-- componentB.vue -->
<template>
<div>{{ methodCommon() }}</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [ mixin ]
}
</script>
通过混合,提高了代码的复用性。
如果组件A中存在钩子函数,混合中也存在相同的钩子函数,那么两个钩子函数都会执行。
执行顺序是混合中的钩子函数先执行,组件中的钩子函数后执行。
// mixin.js
export default {
created() {
console.log('mixin created ...')
}
}
<!-- componentA.vue -->
<template>
<div>component A</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [ mixin ],
created() {
console.log('componentA created ...')
}
}
</script>
最终的执行结果:
mixin created ...
componentA created ...
多个混合的钩子函数,会根据混合使用的顺序来执行。
mixins: [ 'mixin1', 'mixin2' ]
执行的时候,会先执行mixin1中的钩子函数,再执行mixin2中的钩子函数,最后执行当前组件中的钩子函数。
混合中的对象选项,如directives
filters
components
data
computed
methods
等会被混合成一个对象的属性,如果键值对相同,会优先根据组件中的内容进行输出。
// mixin.js
export default {
data() {
return {
msg: 'mixin msg ...'
}
}
}
<!-- componentA.vue -->
<template>
<div>{{ msg }}</div>
</template>
<script>
import mixin from './mixin.js'
export default {
mixins: [ mixin ],
data() {
return {
msg: 'componentA msg ...'
}
}
}
</script>
最终会输出组件A中的msg:componentA msg ...
以上是脚本宝典为你收集整理的006-读书笔记-Vue官网 混合全部内容,希望文章能够帮你解决006-读书笔记-Vue官网 混合所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。