• 封装通用组件


    最近因项目需求,对ElementUI中表格、对话框、菜单等做了二次封装,为了较少代码的书写量等。

    通用组件具备高性能、低耦合的特性。

    1、数据从父组件传入

    为了解耦,子组件本身不能生成数据;即使生成了数据,也只能组件内使用,不能传递出去。

    父组件对子组件传参,使用props,例如:

     props: {
                slides: {
                    type: Array,
                    default: []
                },
                autoplay: {
                    type: Boolean,
                    default: true
                },
                height: {
                    type: String,
                    default: "400px"
                },
                arrow: {
                    type: String,
                    default: "hover"
                }
       }

    2、在父组件处理事件

    在通用组件中,通常需要处理各种事件,通用组件只作为一个中转,事件的处理方法应当尽量放在父组件中。例如:

    在子组件中的方法:

    handleSelectionChange(val) {
            const selectionArr = [];
            val.forEach(function (el) {
                    selectionArr.push(el);
             });
             this.$emit('commitSelection', selectionArr);
              /*向父组件传递的数据:commitSelection  被选中的数据 */
       },
    在父组件中处理:
      <my-table ref='table' @commitSelection='commitSelection'></my-table>
    这样降低了耦合,也保证了通用组件的数据不被污染。不过,不是所有的事件都放在父组件中处理的。例如组件内部的一些交互行为,或者处理组件内部数据的传递,这就不需要在父组件中处理。
    3、留一个slot
     
  • 相关阅读:
    [置顶] app后端设计--总目录
    Centos6.5 nginx+nginx-rtmp配置流媒体服务器
    利用nginx搭建RTMP视频点播、直播、HLS服务器
    如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源
    使用pngquant命令近乎无损压缩PNG图片大小减少70%左右
    字符型图片验证码识别完整过程及Python实现
    python PIL Image模块
    app后端设计(12)--图片的处理
    linux 下如何抓取HTTP流量包(httpry)
    EHcache缓存框架详解
  • 原文地址:https://www.cnblogs.com/happybread/p/9516791.html
Copyright © 2020-2023  润新知