H5W3
当前位置:H5W3 > 问答 > 正文

vue组件内方法抽取问题

有几个组件里都使用了一些方法,都写在methods里了。
这些方法里用了很多data里的变量,有很多this.xxx this.yyy this.zzz等等,大概有10个变量。
我想把这些方法提出来放到一个js里,然后import到vue组件里。
但这些方法内部的变量怎么提取出来呢?
都通过传参传进去吗?

回答

data 数据是公共变量吗?不是的话,试试 Vue.mixin()

Vue提供了相应的功能Mixin
mixin传送门

按你的思路
可以给参数默认值;用过就传参呗;

export function factoryFuc(a="",b=""){
    return new Promise((resolve,reject)=>{

    })
}
参数多有点麻烦
vue mixins了解下;

Vue2x 最好的办法就是使用mixin
如果需要传参的mixin可以使用以下方法

export default rightType => ({ // rightType作为参数传入,返回特定mixin
  data() {
    return {
        xxx:'1'
    }
  },
  computed: {
    hasRight() { // 判断用户是否有权限进入本页面的计算属性
      // 这里的user是之前在app中通过接口返回注入store的用户信息
      const { rightList } = this.$store.state.user;
      return rightList.indexOf(rightType); // 问题解决,美滋滋
    }
  },
  methods: {
    zzz() {
        
    }
  }
})

当然现在vue3x的出现就是为了解决你说的问题,使用compisition Api,把逻辑组合到一个hooks中,直接导入就好了,具体参见
vue3 composition-api

未经允许不得转载:H5W3 » vue组件内方法抽取问题

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址