vue那些事儿之使用混入 (mixins) 解决可复用性

    用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>

阅读更多
个人分类: vue 前端 mixins
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭