vue组件封装

组件渲染方法选择

render

优势：javascript彻底编码，如能够经过javascript对象动态配置渲染的内容。
缺点：html标签层级不明显、使用其余插件不能往指定元素上监听自定义事件、不能用vue响应式等。

template

优势：html层级维护性好、可直接使用vue双向绑定、使用其余插件可向任意标签监听自定义事件等
缺点：经过配置动态渲染组件内容时，动态渲染组件内容实现复杂

选择

template通常用于组件n次封装，标签层级复杂的组件；render通常用于组件内还须要根据javascript object配置定制化动态渲染标签，且标签层级简单的组件，或者最里层组件逻辑封装，不是组件二次封装或者没有使用二次封装组件的自定义事件，如el-table-column，template通常用于功能合集，如el-table。

组件自定义事件

实现原理：监听元素原生事件，如click、input，执行事件回调函数，由回调执行相应自定义事件方法。寻找自定义方法过程即为查询变量值过程，OA——做用域链等。 总结：组件包含独立的做用域，如自定义事件由$listener,独自自定义事件对象储存相应自定义事件。