vue中使用模态框传参_Vue单文件组件开发的基本套路--以常用的Modal模态框组件开发为例...

在实际开发工程化vue项目时，基本都是使用单文件组件形式，即每个.vue文件都是一个组件。最基本的就是UI组件了，我们一般会根据自己的喜好和项目的需要选择一个成熟的组件库来使用，iView组件库、饿了么的Element组件库都是很优秀很全面的组件库，虽然都能满足我们的需求，可众口难调，总有一些特殊的需求不能满足，这个时候就需要我们自己去开发组件实现特殊的需求了。而且我们的目标不仅仅是使用轮子，更要有造轮子的能力。接下来我们就以常用的弹窗Modal组件为例一步一坑的搞一搞vue单文件组件开发。

一个vue组件除了HTML和css结构，最重要的三个部分是slot、props和events，所有的vue组件都逃不离这3个部分。

目标

Modal组件很常见，就是弹出一个带有遮罩的对话框，我们这一次的目标就以iView组件库的Modal为例吧:

iView的Modal组件.gif

1、第一步：基础-单文件组件模式

首先我们先创建一个vue工程，还不清楚的朋友可自行看一下vue官网教程搭建一个。单文件组件顾名思义一个.vue文件就是一个组件，所以我们新建一个Modal.vue文件表示我们的目标Modal组件，再创建一个父组件HelloWorld.vue来调用这个Modal组件，父组件是HelloWorld.vue子组件是Modal.vue代码分别为：

HelloWorld.vue：

打开Modal对话框

import Modal from './Modal.vue'

export default {

data () {

return {

showModal:false

}

},

components:{

'Modal':Modal //声明组件

},

methods:{

toggleModal() {

this.showModal = !this.showModal; //切换showModal 的值来切换弹出与收起

},

}

}

Modal.vue:

我是Modal里的内容

export default {

name: 'Modal',

props: { //props里面准备写上父组件HelloWorld要传进来的数据

},

data() {

return {

}

},

methods: {

}

}

我们这里为了更纯粹的介绍组件间的关系就把HelloWorld.vue通过 vue-router配置成首页，小伙伴们大可根据自己工程的情况而定，反正就是一父一子的关系。运行命令npm run dev(不熟悉的小伙伴可以再回头看看vue官网的教程把工程跑起来，可以看到组件间的调用关系就完成了，当然她还不是个真正的弹出框，但却是所有vue组件的基础：

2、第二步：组件个性化

有了第一步单文件组件结构的基础，接下来就可以在这基础上创造出各种组件来，想做Button组件就做Button组件、想做Loading组件就做Loading组件、想做Modal组件就做Modal组件，直到把所有用到的组件都做完了，就形成了自己的组件库，然后再打包托管到npm上...额慢慢来。接下来花一点时间让Modal.vue看上去有她该有的样子：

2.1Modal组件结构搭建

可以看到一个iView的Modal最基本的内容有遮罩层、弹出框、header头部、body内容区和footer尾部5个部分，各自都有自己的样式，接下来我们就要为Modal.vue组件加上这样的HTML结构和css样式，Modal.vue代码更新为：

Modal.vue：

我是一个Modal的标题

我是一个Modal的内容

关闭

确认

<