Vue实现引入和引出模块(外出部分页面)

Step 1:创建模块，整理要外出的页面

为了增加代码的可读性，应该将功能相似的代码页面放置在同一个文件夹下，比如如果要存放同样都是外出的页面，应该将这些页面整合起来，这里暂时起名为：module。

外出的图片.png

Step 2:在module下创建.vue文件，完成外出页面

这里的写法与一般的vue页面写法相同，同样是三大模块:<template>、<script>、<style>

Step 3:在module下创建index.js文件，在文件中写明外出的模块

import ModuleOne from "../../xxx.vue";
import ModuleTwo from "../../xxx.vue";

export{
  ModuleOne,
  ModuleTwo
}

注意：

1. ModuleOne为自定义的模块名，from后面是外出的页面，一般为模块命名使用驼峰命名法；
2. import是将后面的页面引入Index.js，export是将模块导出，使得所有其他的文件可以找到这个模块；
3. index.js的功能就像是目录，可以方便其他页面使用，也可以将新的模块引入到目录中。

Step 4:将模块引入到主页面中

import { ModuleOne,ModuleTwo } from "../../../module";

Vue.component("module-one", ModuleOne );
//省略其他代码

注意

1. 页面引入时使用{}括起来，方便多个引入；
2. Vue.component()方法用来将引入的模块生成主页面的组件，在页面布局中使用。

Step 5:引入页面组件

在<template></template>中使用组件完成页面布局。

<module-one></module-one>

注意
可以在模块中为属性赋值，记住属性前要加“ : ”，方法前加“@”。