vue那些事儿之使用混入 (mixins) 解决可复用性
用vue这种模板式开发做项目的时候。经常遇到一个问题,这个变量我好像在某个vue里写过了?!!!WDF? 这个方法我在刚才的vue里写过了?不好吧,我那么懒,老做重复的工作。去vue官网看了下,发现有一个叫mixins的东西。官网上是这么说的: 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对
·
用vue这种模板式开发做项目的时候。经常遇到一个问题,这个变量我好像在某个vue里写过了?!!!WDF? 这个方法我在刚才的vue里写过了?不好吧,我那么懒,老做重复的工作。去vue官网看了下,发现有一个叫mixins的东西。
官网上是这么说的:
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
举栗子:
Js:
export const initNet = {
data: function () {
return {
_netData: {}
}
},
methods: {
async init (api) {
let data = await this.$fetch.get(api)
this._netData = data
}
}
}
a.vue js:
export default {
mixins: [initNet],
created: function () {
this.init('/user/a')
}
}
a.vue html:
<template>
<div>
<span>{{_netData.a.userName}}</span>
</div>
</template>
b.vue js:
export default {
mixins: [initNet],
created: function () {
this.init('/user/b')
}
}
a.vue html:
<template>
<div>
<span>{{_netData.b.userName}}</span>
</div>
</template>
更多推荐
已为社区贡献1条内容
所有评论(0)