es6 class写法报错为什么？

Z时代
2024-02-06
分类：IT

第一种写法为什么会报错

写法一报错

export class Swip1{
    methods:{
        swipeHandler: function(params) { <- 这个地方提示有错
          if(-1 < temp && temp< this.magjorCategoryList.majorCategory.length){
            this.setSelect = temp;
            console.log(this.magjorCategoryList.majorCategory[temp])
            this.changeSelect(temp,this.magjorCategoryList.majorCategory[temp])
            this.$bus.$emit("activeTabToCenter", document.getElementById('label' + temp));
          }
        }
    }}

写法二没问题

export let Swip = {
  methods: {
    swipeHandler: function (temp) {
      if(-1 < temp && temp< this.magjorCategoryList.majorCategory.length){
        this.setSelect = temp;
        console.log(this.magjorCategoryList.majorCategory[temp])
        this.changeSelect(temp,this.magjorCategoryList.majorCategory[temp])
        this.$bus.$emit("activeTabToCenter", document.getElementById('label' + temp));
      }
    }
  }}

回答：

建议看一下阮一峰老师的 Class 的基本语法 - ECMAScript 6入门。

类的属性和方法并不是你这样写的。

如果你有想要用混入可以这样写

// myMixin.js
export const myMixin = {
  data() {
    return {
    }
  },
  computed: {
  },
  created() {
  },
  methods:{
  }}

然后再在你需要引入混入的组件里面这样引入就行了

<template>
    ...
</template>
<script>
import { myMixin } from "@/mixins/myMixin";
export default {
  mixins: [myMixin],
  ...
}</script>

同时 Vue 的文档也可以好好看看的，特别是在你需要用到的时候。
关于混入的部分在这里 ? 混入 — Vue.js

回答：

类里面不能再包含对象吧，下面这样就可以

class Swip1{
    swipeHandler (params) {
      if(-1 < temp && temp< this.magjorCategoryList.majorCategory.length){
        this.setSelect = temp;
        console.log(this.magjorCategoryList.majorCategory[temp])
        this.changeSelect(temp,this.magjorCategoryList.majorCategory[temp])
        this.$bus.$emit("activeTabToCenter", document.getElementById('label' + temp));
      }
    }}