vue2中export导出的案例

vue2中export导出的案例在Vue.js2中，我们可以使用export关键字来导出模块，以便在其他文件中导入和使用。这种模块化的开发方式使得我们能够更好地组织和共享代码。

下面是一些Vue.js2中export导出的案例和相关参考内容：

1.导出单个对象或函数

在Vue组件中，可以使用export关键字导出一个单个对象或函数。这样，我们就可以在其他组件中导入并使用它。例如：

```javascript

//utils.js

exportfunctionadd(a,b){

returna+b;

}

//App.vue

<script>

import{add}from'./utils';

exportdefault{

//...

created(){

console.log(add(2,3));//输出5

},

//...

}

</script>

```

在上面的例子中，我们在`utils.js`中导出了一个名为`add`的函数，并在`App.vue`组件中导入并使用它。

参考文档：

-[ES6模块语法](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)

-[Vue组件](/v2/guide/components-registration.html)

2.导出多个对象或函数

除了可以导出单个对象或函数外，我们还可以一次性导出多个对象或函数。在导入时，我们可以使用ES6的解构赋值语法来获取导出的对象或函数。例如：

```javascript

//utils.js

exportfunctionadd(a,b){

returna+b;

}

exportfunctionsubtract(a,b){

returna-b;

}

exportconstPI=3.14159;

//App.vue

<script>

import{add,subtract,PI}from'./utils';

exportdefault{

//...

created(){

console.log(add(2,3));//输出5

console.log(subtract(5,3));//输出2

console.log(PI);//输出3.14159

},

//...

}

</script>

```

在上面的例子中，我们在`utils.js`中导出了两个函数`add`和`subtract`，以及一个常量`PI`。在`App.vue`组件中，我们使用`import`关键字来导入它们，并在`created`生命周期钩子函数中使用它们。

参考文档：

-[ES6解构赋值语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

3.默认导出一个对象或函数

除了使用`export`关键字导出具名的对象或函数外，我们还可以使用`exportdefault`导出一个默认的对象或函数，这样在导入时可以省略花括号。例如：

```javascript

//utils.js

exportdefaultfunctionmultiply(a,b){

returna*b;

}

//App.vue

<script>

importmultiplyfrom'./utils';

exportdefault{

//...

created(){

console.log(multiply(2,3));//输出6

},

//...

}

</script>

```

在上面的例子中，我们在`utils.js`中使用`exportdefault`关键字导出了一个名为`multiply`的函数。在`App.vue`组件中，我们使用`import`关键字导入该函数，并在`created`生命周期钩子函数中使用它。

参考文档：

-[ES6默认导出](/zh-CN/docs/Glossary/Default_export)

4.导出对象

除了导出函数外，我们还可以使用`export`关键字导出一个对象。这个对象可以包含Vue组件的属性、方法和生命周期钩子函数等。例如：

```javascript

//utils.js

exportconstutils={

getName(){

return'John';

},

getAge(){

return25;

}

}

//App.vue

<script>

import{utils}from'./utils';

exportdefault{

//...

created(){

console.log(utils.getName());//输出'John'

console.log(utils.getAge());//输出25

},

//...

}

</script>

```

在上面的例子中，我们在`utils.js`中导出了一个名为`utils`的对象，其中包含了`getName`和`getAge`两个方法。在`App.vue`组件中，我们使用`import`关键字导入`utils`对象，并使用它的方法。

参考文档：

-[Vue组件API](/v