vue中exportdefault

在Vue中，`export default`是用来导出模块的一种方式。它允许我们将一个对象、函数或类作为默认导出，其他模块可以通过`import`语句来引入这个模块。

首先，`export default`可以用来导出一个对象，例如：

```javascript

// module.js

const obj = {

name: 'John'

age: 30

sayHello() {

console.log(`Hello

my name is ${this.name}`);

}

};

export default obj;

```

其他模块可以通过以下方式引入：

```javascript

// app.js

import obj from './module.js';

console.log(obj.name); // John

obj.sayHello(); // Hello

my name is John

```

我们还可以使用`export default`导出一个函数，例如：

```javascript

// module.js

export default function sayHello(name) {

console.log(`Hello

${name}`);

}

```

其他模块可以通过以下方式引入：

```javascript

// app.js

import sayHello from './module.js';

sayHello('John'); // Hello

John

```

`export default`还可以用来导出一个类，例如：

```javascript

// module.js

export default class Person {

constructor(name

age) {

this.name = name;

this.age = age;

}

sayHello() {

console.log(`Hello

my name is ${this.name}`);

}

}

```

其他模块可以通过以下方式引入：

```javascript

// app.js

import Person from './module.js';

const person = new Person('John'

30);

console.log(person.name); // John

person.sayHello(); // Hello

my name is John

```

此外，`export default`还可以与`export`语句结合使用，导出多个模块。例如：

```javascript

// module.js

const obj = {

name: 'John'

age: 30

sayHello() {

console.log(`Hello

my name is ${this.name}`);

}

};

export default obj;

export function sayGoodbye() {

console.log('Goodbye');

}

```

其他模块可以通过以下方式引入：

```javascript

// app.js

import obj

{ sayGoodbye } from './module.js';

console.log(obj.name); // John

obj.sayHello(); // Hello

my name is John

sayGoodbye(); // Goodbye

```

总结起来，`export default`提供了一种方便的方式来导出模块，无论是导出对象、函数还是类都可以使用这种方式。通过`import`语句，其他模块可以轻松引入并使用这些导出的模块。