Vue学习之旅Part15：在Webpack整合Vue的环境下暴露组件的成员(export default和export)

Vue的组件文件由三部分组成：
<template>：HTML代码
<script>：业务逻辑
<style>：样式

在<script>标签内部暴露组件的属性及方法：

<template>
    <div>
        <h1>登录组件{{msg}}</h1>
    </div>
</template>
<script>
    export default {
        // 组件中的data必须为一个方法
        data()
        {
            return {
                msg: "Hi"
            };
        },
        methods:{
            sayHello()
            {
                console.log("Hello");
            }
        }
    }
</script>

<style>

</style>

★暴露成员：

Webpack可识别两套导入模块及暴露成员的方式
一套是ES6的语法 另一套是Nodejs的语法 此两种方式不能混用
即 要么使用Node语法 要么使用ES6语法

Node语法：

在Node中 可以使用var 名称=require(“模块标识符”)来导入模块
使用module.exports和exports这两个关键词来暴露成员

ES6语法：

在ES6中通过规范的形式规定了在ES6中如何导入模块
import 模块名 from "模块标识符" 或 import "标识路径"
使用export default和export这两个关键词来向外暴露成员

例：

export default{
    name:"陈涛",
    age:18
}

除了直接暴露之外 还可用任意变量来接收

var info={
    name:"陈涛",
    age:18
}

export default info

在一个模块中 export default只允许向外暴露一次
否则会报错

除了export default之外
export也可暴露成员：

var info={
    name:"陈涛",
    age:18
}
export default info
export var title="Rabbit"
export var content="This is a Rabbit"

且在一个模块中 既可以使用export 也可同时使用export default来暴露成员
此举的目的是 为了能在一个模块中暴露出多个成员

因为export可以暴露多个成员 但export default只能暴露一个成员

---

★接收成员：

只能通过花括号的形式来接收以export暴露的成员
且接收的名称必须和暴露时的名称严格对应(否则这么多成员怎么知道是哪一个…)
但以export default暴露的成员在接收的时候可以任意起名 因为default的只有一个
此方式叫做【按需导出】 即 按照需要导出成员
其意义在于：若不需要某些成员 则不在花括号中定义即可不导入

多个花括号里的成员之间用逗号分隔

import info,{title,content} from "./test.js"
console.log(info)
console.log(title)
console.log(content)

还可给花括号中的名称起别名：

import info,{title as t,content as c} from "./test.js"
console.log(info)
console.log(t)
console.log(c)

但export default的名称不能起别名

---

总结：

为方便记忆 可以将export default看作是一个特殊的暴露成员的关键字
export default只能有一个 并且在接收的时候名称是默认的(default) 因此不能起别名

而export可以有很多个 放置于花括号内 且能起别名

---