render + mixins 写法，基础篇

vue中使用 render + mixins 写法，极大程度简化代码开发

背景介绍

• 常规的列表页面开发

  
  
  页面展示

组件

• page.vue

• FooterPagination.vue

优点

• FooterPagination.vue

// 这些代码可以复用，只要在这里改动配置，可以达到系统中所有分页都生效
  

缺点

• page.vue

// 还是要在父组件繁琐的写配置，如果要加一个props或者$emit，那么还要到每个引用的底部分页的页面去加

---

mixins

• 引入 footerPagination.js

import FooterPagination from '@/components/FooterPagination.vue'

export default {
  components: {
    FooterPagination
  },

  data() {
    return {
      // 分页
      pagination: {
        page: 1,
        size: 20,
        total: 78
      }
    }
  },

  methods: {
    /**
     * 改变分页页数
     * @param {Number} page 页数
     */
     changePage(page) {
      this.pagination.page = page
      this.getTableData()
    },

    /**
     * 改变每页条数
     * @param {Number} size 每页条数
     */
    changeSize(size) {
      this.pagination.size = size
      this.changePage(1)
    },
  }
}

• 修改 page.vue

• FooterPagination.vue 不做改动

优点

1. 把js部分的代码，提取到mixins/footerPagination.js中；使得js配置不用在每个页面重复的写
2. 规范组件中属性和方法，强制命名；避免不同页面，属性和方法命名不一样

缺点

1. template中html部分仍然无法做到复用
2. 配置中的属性和方法，新手不容易找到，可能会忽略覆盖

---

render

• 改写 page.vue

• 改写 mixins/footerPagination.js
  在methods里，增加genFooterPagination方法

export default {
  ...
  methods: {
    ...
    /**
     * 渲染 底部分页
     */
    genFooterPagination() {
      return (
        

          
        
      )
    },
  }
}

优点

1. 可以复用template中html部分，把es-pagination组件，真正直接放到页面里；直接用页面里的data属性和methods方法，不需要下发和上报

缺点

1. 写法复杂，但随着vue-cli3对vue-jsx的支持，让jsx在vue中开发使用，也变得更加便利；
2. 官方文档：https://github.com/vuejs/jsx

render + mixins

1. 结合mixins的优点：复用js逻辑代码；
2. 结合render的优点：复用html结构；
   以上两者结合在一起使用，可以做到真正意义上的代码复用；而不是组件形式的伪复用。

源码链接：https://gitee.com/wkp_mayun/render-mixins-esay

下一篇：render + mixins 写法，进阶