组件库

205 阅读1分钟

组件库

组件封装的思路

  1. 定义好 你需要使用者传入的数据
  2. 定义好 你提供给使用者的方法
  3. 写好组件的内部逻辑

分析element-ui组件库部分组件

  1. MessageBox弹框组件的实现
  • 使用ES6的模块的export命令对外输出MessageBox

  • MessageBox是一个方法,接收一个对象作为参数

  • MessageBox方法内部实例化一个Vue, new Vue的时候会将data选项里面的属性代理到Vue实例上。

  • 遍历对象,将对象上的属性值替换Vue实例上的属性值。

  • 比如beforeClose属性,它是MessageBox关闭前的回调,该属性值是一个函数,我们调用MessageBox方法,我们传入的对象定义了beforeClose;那么关闭时就会执行我们传入的方法。

  • 弹框的内容可以是字符串也可以是VNode

  • 最终我们得出的结论是:

  1. MessageBox弹框组件的输入是一个对象,它的输入数据有弹框标题、弹框内容、弹框是否有确认按钮、弹框是否有取消按钮、弹框确认按钮的名称、弹框取消按钮的名称、弹框点击确认后的回调函数、弹框的大小、
  2. MessageBox弹出组件的输出是通过输入对象中定义回调函数来实现输出