Vue之import

经常看到vue的代码里面有import，这里把几种情况总结一下。

case1：

如果使用export default 导出的对象，在import的时候，可以任意命名。

<template>
    <div>
        <label>cat</label>
        <label>cat</label>
        <label>cat</label>
        <label>cat</label>
        <label>cat</label>
        <label>cat</label>
    </div>
</template>
<script>
export default {
  name: 'MyCat'
}
</script>

导入：这里的名字可以任意命名

import MyCat from './cat'

 

 case2：

使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名，

实例如下：

export { default as AppHeader } from './header'

  case3：

使用import可以导入文件夹

那么这个文件夹下面，会有一个index.js 文件，实际上是导入这个文件。

index.js可以这么写

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as AppHeader } from './header'

如果还找不到index.js 那么还会去找index.vue文件

  case4：

import father from '@/components/father'

这里的@的含义是等价于 /src 这个目录，避免写麻烦又易错的相对路径