需求
上一篇章中，我們已經使用webpack構建起了vue開發渲染組件的項目。
但是如果想要調用vue組件的方法，該怎麼處理呢？
使用 export default 調用 login 組件的方法
在login.vue中使用export default暴露script方法，提供執行
<template>
<div>
<h1>這是login登錄組件 --- {{msg}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg: 123,
}
},
methods:{
show(){
console.log("調用login組件的show方法！")
}
},
mounted() {
this.show();
}
}
</script>
<style>
</style>
打開網頁查看如下：
ES6中語法使用總結
使用
export default和export導出模塊中的成員; 對應ES5中的module.exports和export使用
import ** from **和import '路徑'還有import {a, b} from '模塊標識'導入其他模塊
下面來看看示例。
export default 示例
首先編寫一個 test.js ，然後使用 export default 暴露一個對象，然後在 main.js 中導入使用。
1.編寫test.js
// 使用 export default 暴露成員
export default {
info: {
name: "lisi",
age: 28
},
}
2.編寫main.js導入test.js成員
// 導入test.js，設置任意變量 m1 作爲導入對象
import m1 from './test.js'
console.log(m1.info); // 打印 test.js 中的 info 對象
注意：使用 export default 導入的對象變量，可以任意命名變量接收。
在瀏覽器查看打印信息
3.修改一下接收變量名，確認能否正常打印信息
打開瀏覽器如下：
4. export default 能否多次暴露呢？
發現編譯的時候報錯如下：
說明：export default 只允許使用一次。那麼如果還想要暴露其他成員，該怎麼辦呢？
這時候可以使用 export
export 示例
1.使用export暴露成員變量
在上面無法使用export default暴露二次成員對象，那麼可以使用 export 來暴露，如下：
// export 暴露成員對象
export var info2 = {
name: "zhangsan",
age: 30
};
2.使用花括號{變量名}來導入 export 暴露的成員變量
打開瀏覽器查看能否正常打印，如下：
3.export暴露的變量與import導入的變量名必須一致
如果導入的變量名不一致，則會報錯，示例如下：
將接收變量名改爲info3，再看看打印信息如下：
說明：
使用export暴露的成員變量 與 import導入的成員變量名稱必須一致。
4.使用export暴露多個成員
同時使用 import 導入多個成員，如下：
在瀏覽器查看打印信息如下：
5.使用export暴露的成員，可以按需導入，對於不需要的成員，在{}可以不定義接收
6.導入export暴露的成員，可以使用as設置別名
在剛纔示例中，export暴露的成員名稱必須與import導入的一致。那麼如果就是需要該名稱呢？這時候可以使用as設置別名。
查看能否正常打印 info4 ，如下：
更多精彩原創Devops文章，快來關注我的公衆號：【Devops社羣】 吧：