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>

展示的效果如下，背景是遮罩层，显示弹窗信息