Vue学习之旅Part15：在Webpack整合Vue的环境下暴露组件的成员(export default和export)
Vue的组件文件由三部分组成：
：HTML代码
：业务逻辑
：样式
在标签内部暴露组件的属性及方法：
登录组件{{msg}}
export default {
// 组件中的data必须为一个方法
data()
{
return {
msg: "Hi"
};
},
methods:{
sayHello()
{
console.log("Hello");
}
}
}
★暴露成员：
Webpack可识别两套导入模块及暴露成员的方式
一套是ES6的语法 另一套是Nodejs的语法 此两种方式不能混用
即 要么使用Node语法 要么使用ES6语法
在Node中 可以使用var 名称=require(“模块标识符”)来导入模块
使用module.exports和exports这两个关键词来暴露成员
在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可以有很多个 放置于花括号内 且能起别名
Piconjo_Official
原创文章 228获赞 33访问量 168万+
关注
私信
展开阅读全文
作者：Piconjo_Official