vue2中export導(dǎo)出的案例

vue2中export導(dǎo)出的案例在Vue.js2中，我們可以使用export關(guān)鍵字來(lái)導(dǎo)出模塊，以便在其他文件中導(dǎo)入和使用。這種模塊化的開(kāi)發(fā)方式使得我們能夠更好地組織和共享代碼。

下面是一些Vue.js2中export導(dǎo)出的案例和相關(guān)參考內(nèi)容：

1.導(dǎo)出單個(gè)對(duì)象或函數(shù)

在Vue組件中，可以使用export關(guān)鍵字導(dǎo)出一個(gè)單個(gè)對(duì)象或函數(shù)。這樣，我們就可以在其他組件中導(dǎo)入并使用它。例如：

```javascript

//utils.js

exportfunctionadd(a,b){

returna+b;

}

//App.vue

<script>

import{add}from'./utils';

exportdefault{

//...

created(){

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

},

//...

}

</script>

```

在上面的例子中，我們?cè)赻utils.js`中導(dǎo)出了一個(gè)名為`add`的函數(shù)，并在`App.vue`組件中導(dǎo)入并使用它。

參考文檔：

-[ES6模塊語(yǔ)法](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)

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

2.導(dǎo)出多個(gè)對(duì)象或函數(shù)

除了可以導(dǎo)出單個(gè)對(duì)象或函數(shù)外，我們還可以一次性導(dǎo)出多個(gè)對(duì)象或函數(shù)。在導(dǎo)入時(shí)，我們可以使用ES6的解構(gòu)賦值語(yǔ)法來(lái)獲取導(dǎo)出的對(duì)象或函數(shù)。例如：

```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>

```

在上面的例子中，我們?cè)赻utils.js`中導(dǎo)出了兩個(gè)函數(shù)`add`和`subtract`，以及一個(gè)常量`PI`。在`App.vue`組件中，我們使用`import`關(guān)鍵字來(lái)導(dǎo)入它們，并在`created`生命周期鉤子函數(shù)中使用它們。

參考文檔：

-[ES6解構(gòu)賦值語(yǔ)法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

3.默認(rèn)導(dǎo)出一個(gè)對(duì)象或函數(shù)

除了使用`export`關(guān)鍵字導(dǎo)出具名的對(duì)象或函數(shù)外，我們還可以使用`exportdefault`導(dǎo)出一個(gè)默認(rèn)的對(duì)象或函數(shù)，這樣在導(dǎo)入時(shí)可以省略花括號(hào)。例如：

```javascript

//utils.js

exportdefaultfunctionmultiply(a,b){

returna*b;

}

//App.vue

<script>

importmultiplyfrom'./utils';

exportdefault{

//...

created(){

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

},

//...

}

</script>

```

在上面的例子中，我們?cè)赻utils.js`中使用`exportdefault`關(guān)鍵字導(dǎo)出了一個(gè)名為`multiply`的函數(shù)。在`App.vue`組件中，我們使用`import`關(guān)鍵字導(dǎo)入該函數(shù)，并在`created`生命周期鉤子函數(shù)中使用它。

參考文檔：

-[ES6默認(rèn)導(dǎo)出](/zh-CN/docs/Glossary/Default_export)

4.導(dǎo)出對(duì)象

除了導(dǎo)出函數(shù)外，我們還可以使用`export`關(guān)鍵字導(dǎo)出一個(gè)對(duì)象。這個(gè)對(duì)象可以包含Vue組件的屬性、方法和生命周期鉤子函數(shù)等。例如：

```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>

```

在上面的例子中，我們?cè)赻utils.js`中導(dǎo)出了一個(gè)名為`utils`的對(duì)象，其中包含了`getName`和`getAge`兩個(gè)方法。在`App.vue`組件中，我們使用`import`關(guān)鍵字導(dǎo)入`utils`對(duì)象，并使用它的方法。

參考文檔：

-[Vue組件API](/v