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为

Logo

前往低代码交流专区

更多推荐