在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`语句,其他模块可以轻松引入并使用这些导出的模块。