vue组件导入的方式

目录

第一种

第二种

---

第一种

        第一种自然是直接import xxx from "组件的路径"，然后再到components中引用，例如vue自带的helloworld.vue示例：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

        这种确实常用，不过还有其他的导入方式，利用解构来实现

第二种

        我们可以在原本的组件目录文件夹中添加一个index.js，然后在这个index.js中将这些组件导出，在用到这些组件的时候就可以直接在导入这个index.js时解构获取想要的组件了，如下

        例如，将布局文件中每个区域都作为一个组件分出来，

         index.vue中代码大概如下， Sidebar、ElHeader和ElMain都是自定义的组件，存放在components文件夹中

<template>
  <el-container>
    <el-aside width="200px">
      <!-- 左侧导航 -->
      <Sidebar></Sidebar>
    </el-aside>
    <el-container>
      <!-- 右侧头部 -->
      <el-header>
        <ElHeader></ElHeader>
      </el-header>

      <!-- 右侧主体 -->
      <ElMain></ElMain>
    </el-container>
  </el-container>
</template>

 

        每个组件中具体代码就不展示了

        主要是index.js中的代码，靠这个代码将这个components文件夹中的组件导出的

export {default as ElMain} from "./main"
export {default as Sidebar} from "./sidebar"
export {default as ElHeader} from "./header"

        就这么几句而已，然后我们在页面中导入这些组件的时候就可以使用解构了

import {Sidebar,ElMain,ElHeader} from "./components";

        注意，解构时的名字必须跟你导出的的一致，要用哪些就导入哪些组件。

        组件注册还是原本那样：

export default {
  ...
  components: {
    Sidebar,
    ElMain,
    ElHeader,
  },
};
</script>

        使用的话没必要写了吧