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

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可以有很多个 放置于花括号内 且能起别名