全栈的自我修养 ———— vue中export的几种导入与引用方式

直接导入

// directionExport
alert('这是直接导入')

<template>
  <div></div>
</template>

<script>
import './js/directionExport'
export default {
}
</script>

默认导入

// test2
const a = 10;
const b = 20;
function sum (a, b) {
    return a + b
    
}
export default {
    a,
    b,
    sum
}

<template>
  <div>
  </div>
</template>

<script>
import result from './js/test2'
export default {
  data() {
    return {
      a: result.a,
      b: result.b,
      sum: 0
    }
  },
  methods: {
    testMethod() {
      this.sum = result.sum(this.a,this.b)
    }
  },
  mounted() {
    this.testMethod()
    alert(this.sum)
  }
}
</script>

按需导入

// test3
export const i = 1000;
export const b = 2000;
export function sum (i, b) {
    return i+b
}
export default {
    i,b,sum
}

<template>
  <div>
    {{ i }}
    {{ b }}
    {{ c }}
  </div>
</template>

<script>
import { i,b,sum } from '../../js/test3'
export default {
  data() {
    return {
      i: i,
      b: b,
      c: 0
    };
  },
  methods: {
    print() {
      this.c = sum(200,400)
    }
  },
  mounted() {
    this.print()
  }
}
</script>

<style>

</style>