vue插件开发调用render函数

定义vue插件

很多同学看不懂export default关键词，特意写明导出方式
具体es6语法export default

• 方法1（工作中常用）

// getModules.js
import Vue from 'vue'
export default{
  install(Vue, options) {
    // 1.添加实例方法
    Vue.prototype.setImgSize = function (param) { ... }
    // 2.添加全局方法或者属性
    Vue.Method = function() { ... }
    // 3.注册全局组件
    Vue.component('modules',  {...})
    // ...
  }
}

• 方法2 官方文档

// getModules.js
// 参数1是Vue构造器，参数2是可选对象
MyPlugin.install = function (Vue, options) {
  // 1.添加实例方法
  // 2.添加全局方法或者属性
  // ...
}
export default MyPlugin

调用vue插件

import Vue from 'vue'
import modules from './getModules.js'
Vue.use(modules)

注意点:
1、通过Vue.use(MyPlugin)使用，本质上是调用MyPlugin.install(Vue)
2、使用插件必须在new Vue()启动应用之前完成，实例化之前就要配置好。
3、如果使用Vue.use多次注册相同插件，那只会注册成功一次。

案例：如何展示首页？首页由多个模块组合，比如轮播图、热门推荐、秒杀模块等等，后台允许配置重复模块，首页展示须按照后台返回模块顺序展示，这时候推荐结合render函数动态渲染首页，与以往的分类、搜索列表页不一致，它们是静态的。

• 第一步：根据首页展示拆分模块，各个模块对应一个vue文件，各自vue文件中处理各自的逻辑；比如：moduleBanner.vue、moduleMayLike.vue、moduleNoticeBoard.vue对应有轮播图、猜你喜欢、广告通知模块等等
• 第二步：调用接口获取数据、同步到状态管理器

// 设置 首页组件
import moduleBanner from '@/views/index/moduleBanner.vue'
import moduleMayLike from '@/views/index/moduleMayLike.vue'
import moduleNoticeBoard from '@/views/index/moduleNoticeBoard.vue'

// 首页用到的组件同步到vuex
this.$store.commit("commonComponents", [moduleBanner, moduleMayLike, moduleNoticeBoard]);
// 发送请求
indexApi.cmsFloor(this.$route.query.json_id)
    .then((res) => {
        if(res.result.code == 200) {
            // 接口返回数据同步到vuex
            this.$store.commit("floorData", res.rows) 
        }
    })
    .catch((error) => {
        console.log(error);
    })

• 第三步：状态管理器getters方法中定义componentsSort函数，获取首页模块组件数组

const getters = {
    componentsSort(state){
      let data = state.indexData;
      let componentsArray = state.commonComponents;
        let componentList=[]
        // 遍历循环接口返回数据，封装return组件数组
        for(var i=0;i<data.length;i++){
            for(var j=0;j<componentsArray.length;j++){
                if(data[i].moduleName == componentsArray[j].name){
                    componentList.push(componentsArray[j]);
                    break;
                }
            }
        }
        return componentList
    }
}

第四步：定义插件，用于注册全局组件modules，这个组件包含首页所有的模块

export default {
    install(Vue) {
        // 注册全局组件modules
        Vue.component('modules', {
            render: function(createElement, context) {
                if(!this.componentList) return
                return createElement("div",
                    // 遍历数组，动态生成组件
                    this.componentList.map(function(item, index) {
                        return createElement(item, {
                            attrs: {level: index}
                        })
                    })
                )
            },
            computed: {
                // 获取组件数组
                componentList() {
                    return this.$store.getters.componentsSort
                }
            }
        })
    }
}

第五步：调用插件、使用全局组件modules

// 调用插件
import modules from './util/getModules.js'
Vue.use(modules)

// 使用全局组件modules
<template>
  <div class="index">
    <SearchHeader></SearchHeader>
    <modules></modules>
   <GoTop></GoTop>
 </div>
</template>