Vue export default 和 export 的使用方式

2023-10-29 01:27:07

好的，以下是有关“60.Vue export default 和 export 的使用方式”的文章。

Vue中的export default和export

Vue.js中，export default和export是两个非常重要的，用于将组件、对象、属性、方法和实例导出到其他模块中。

export default

export default用于导出一个默认的组件或对象。它只能在模块中使用一次，而且必须放在模块的最后一行。

// test.js
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}

// main.js
import MyComponent from './test.js'

export default {
  components: {
    MyComponent
  }
}

在上面的例子中，test.js模块导出了一个默认的组件，main.js模块导入了这个组件并将其注册为一个组件。

export

export用于导出多个组件、对象、属性、方法和实例。它可以多次使用，而且可以放在模块的任何位置。

// test.js
export const message = 'Hello, world!'

export function sayHello() {
  console.log(message)
}

export class MyClass {
  constructor() {
    this.message = message
  }

  sayHello() {
    console.log(this.message)
  }
}

// main.js
import { message, sayHello, MyClass } from './test.js'

export default {
  data() {
    return {
      message: message
    }
  },
  methods: {
    sayHello: sayHello
  }
}