vue初学者对于export 和 export default的一些思考
export 和export default的区别1.export default 只能有一个export 可以有多个2.export default 因为是值传递,所以可以匿名export 必须指明名字3.export 对应的import要加{ }export default 对应的import不用{ } ,import的名字默认为导出的匿名数据命名export 的对象,方法或数据类型需要指定导
·
export 和export default的区别
1.
- export default 只能有一个
- export 可以有多个
2.
- export default 因为是值传递,所以可以匿名
- export 必须指明名字
3.
- export 对应的import要加{ }
- export default 对应的import不用{ } ,import的名字默认为导出的匿名数据命名
export 的对象,方法或数据类型需要指定导出名称,且在import是需要加入大括号。
export default 导出的是值,import无需加大括号。
export default后面是大括号{ }则表示导出匿名对象
//a.js
//写法一:
const person = {
name: 'lily',
age: '16'
}
export default person
//export default {person} 这是我犯的错,就是因为没有理解
//写法二:
export default{
name:'lily',
age:'16'
}
export default
export default{ }是说导出了一个对象,对象就避免不了属性和方法,属性就用key:value来表示,。所以里面的都是key:value这种方式出现的。而vue3的set up() 就是方法,举个简单的例子如下
//a.js
export default{
name:'lily',
age:'16',
getAge () {
console.log('get age function')
return 'i should be 16';
}}
而import { } from 这种方式是解构,解构啊,解构。一定要记得js里面有解构一说。
但是由于webpack和babel6之后的不支持,所以对于export 出来的对象,import不能直接解构,必须先整个引进来然后自己解构。如下
//---b.js---
import {name,age} from './a.js'//并不会生效。
//正确写法
import person from './a.js'
let{name,age} = person
console.log(person)
console.log(name)
console.log(age);
let result = person.getAge()
console.log(result)
打印出的log为
更多推荐
已为社区贡献2条内容
所有评论(0)