组件渲染方法选择
render
优点:javascript完全编码,如可以通过javascript对象动态配置渲染的内容。
缺点:html标签层级不明显、使用其他插件不能往指定元素上监听自定义事件、不能用vue响应式等。
template
优点:html层级维护性好、可直接使用vue双向绑定、使用其他插件可向任意标签监听自定义事件等
缺点:通过配置动态渲染组件内容时,动态渲染组件内容实现复杂
选择
template一般用于组件n次封装,标签层级复杂的组件;render一般用于组件内还需要根据javascript object配置定制化动态渲染标签,且标签层级简单的组件,或者最里层组件逻辑封装,不是组件二次封装或者没有使用二次封装组件的自定义事件,如el-table-column,template一般用于功能合集,如el-table。
组件封装原则
- 目的:封装公共内容/功能
- 解耦性:一个功能对应一个组件,然后组件套用
- 拓展性:组件暴露自定义内容方法,如javascript编程的render方法
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。