组件库
组件封装的思路
- 定义好 你需要使用者传入的数据
- 定义好 你提供给使用者的方法
- 写好组件的内部逻辑
分析element-ui组件库部分组件
- MessageBox弹框组件的实现
-
使用ES6的模块的export命令对外输出MessageBox
-
MessageBox是一个方法,接收一个对象作为参数
-
MessageBox方法内部实例化一个Vue, new Vue的时候会将data选项里面的属性代理到Vue实例上。
-
遍历对象,将对象上的属性值替换Vue实例上的属性值。
-
比如beforeClose属性,它是MessageBox关闭前的回调,该属性值是一个函数,我们调用MessageBox方法,我们传入的对象定义了beforeClose;那么关闭时就会执行我们传入的方法。
-
弹框的内容可以是字符串也可以是VNode
-
最终我们得出的结论是:
- MessageBox弹框组件的输入是一个对象,它的输入数据有弹框标题、弹框内容、弹框是否有确认按钮、弹框是否有取消按钮、弹框确认按钮的名称、弹框取消按钮的名称、弹框点击确认后的回调函数、弹框的大小、
- MessageBox弹出组件的输出是通过输入对象中定义回调函数来实现输出