vue的封装组件及案例展示

责编:menVScode 2017-11-16 22:29 阅读(1314)

封装组件

        每个组件会提供一些标准且简单的对应接口,允许使用者设置和调整参数和属性。

        可以将不同来源的多个组件有机的集合在一起,快速构成一个符合实际需要的复杂(大型)应用程序。

组件的主要特点

        重用性:能够公用和通用;

        可定制性:可设置参数和属性;

        高内聚性:功能完成;

        互操作性:多组件协同工作;

Vue组件的API来自三部分

        props参数:传递数据给组件;

        slot定制模板:外部模板混合子组件模板;

        event自定义事件:监控子组件交互状态;


组件封装例子

1、封装modal模态框组件

http://menvscode.com/detail/5a0da08d10c98d0e654c1bb2

2、封装alert提醒组件

http://menvscode.com/detail/5a0ef43310c98d0e654c1bb8

3、递归组件封装树形菜单

http://menvscode.com/detail/5a10463610c98d0e654c1bb9

4、动态组件例子

http://menvscode.com/detail/5a104d6a10c98d0e654c1bba

标签: 组件 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码