1、什么是组件
都说Vue是组件化开发，确实有道理，别说按钮输入框这种组件了，就连每个页面，从本质来看也是一个个组件，所以目标很明确，拿来就能用，有一定使用规范和预设样式，我都认为是一个组件，包括有一定规范和预设样式的页面，也可以认为是一个组件
2、可以写出什么组件？
关于如何去写自己的组件，我将它分为两块，一块是套路组件，一块是创新组件
套路组件
什么是套路组件，为什么我称之为套路？
首先必须知道，无论你使用过哪个组件库，只要是见识过2个及2个以上的同学都会发现，组件库的内容其实大同小异
最常见的正如我上文所提到的按钮和输入框，基本所有的组件库都会有的内容，同时能发现在原Html代码中也可以使用到的相似元素，这样一想，那么组件库中按钮、输入框之类的组件相当于是对原有元素的二次包装。
使用的是已经有的元素，通过预设样式和编写使用文档制作出来的组件，这不就是套路嘛
创新组件
既然如此，那创新组件就很显然了，完全使用自己的想法编写出来的组件，不使用默认的元素进行包装
3、vue组件引入方式
1 引入第三方插件
import echarts from 'echartshttp://' 2 引入工具类
第一种是引入单个方法
import {axiosfetch} from './util'; 下面是写法，需要export导出
export function axiosfetch(options) {
} 第二种 导入成组的方法
import * as tools from './libs/tools' 其中tools.js中有多个export方法,把tools里所有export的方法导入
vue中怎么用呢？
Vue.prototype.$tools = tools 直接用 this.$tools.method调用就可以了
说到这 export 和 export default 又有什么区别呢？
下面看下区别
先是 export
import {axiosfetch} from './util'; //需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号
如果是两个方法
import {axiosfetch,post} from './util'; 再是 export default
import axiosfetch from './util'; //不需要加花括号 只能一个一个导入 3.导入 css文件
import 'iview/dist/styles/iview.css'; 如果是在.vue文件中那么在外面套个style
4.导入组件
import name1 from './name1'
import name2 from './name2'
components:{
name1,
name2,
}, 3、结合上两篇文章的代码生成页面实列说明
代码路径/src/view/tool/gen
1）点击代码生成菜单，展示列表记录
2）点击导入按钮，进入另外一个页面组件
1.在script引入组件
import importTable from "./importTable"; 2、在template定义组件和设置组件事件和参数
<import-table ref="import" @ok="handleQuery" /> 3、定义按钮，触发按钮后将组件显示，例如下面代码片段，定义了一个按钮，按钮是编辑功能，按钮里面绑定一个方法，方法是@click="openImportTable"
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload"
size="mini"
@click="openImportTable"
v-hasPermi="['tool:gen:import']"
>导入</el-button>
</el-col> openImportTable：打开弹窗，加载import页面
ref 有三种用法：
1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素
2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
下面代码是使用第二种方法，加载子组件，其中import对应template里面的ref组件名称
/** 打开导入表弹窗 */
openImportTable() {
this.$refs.import.show();
}, 4、importTable组件详解
1）、从上面执行openImportTable的方法可以看出this.$refs.import.show();调用子组件的show方法，show的方法里面执行了两个操作，一个是查询列表的方法，另外一个是这是visible属性为ture，el-dialog组件里面有一个属性是visible 是否显示 Dialog，支持 .sync 修饰符，如果是ture，则显示对话框，如果是flas，则不现实对话框
// 显示弹框
show() {
this.getList();
this.visible = true;
}, 2）、在template标签里面使用el-dialog组件，表示该组件使用弹窗的方式进行显示，width="800px"：表示弹窗对话框的宽度是800px，
append-to-body：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
<el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
</el-dialog> 展示的效果如下，背景是遮罩层，显示弹窗信息