谈谈vue中的reader函数

vue中的reader函数和template一样都是创建html模板的，有的时候模板中根据不同情况渲染不同模板时，使用template就显得代码冗长繁琐而且有大量重复，如：

这里通过传入level值来显示不同的dom,可以实现只是代码太长了

通过reader函数渲染如下：

reader函数通过props传过来的level值用createElement（vue中有时用h代替，就是俗称的h函数）直接创建dom元素，这样就省了一些判断

createElement参数：

一般有三个参数：1.标签(div)，2. 标签上的属性，3.子节点

一个简单的实例：

map.vue组件

index.vue组件引用map组件并传入参数：

 

zoneMap.vue组件：

export default {

  name: 'zoneMap',

  props: ['mapAddress'],

  data() {

    return {

    }

  },

}

主要的一个流程是：index.vue组件引入了map.vue   -->   map.vue自己创建了一个div标签并引入了zoneMap.vue    -->   zoneMap渲染传过来的props数据

最后显示：

注意：用reader函数的时候文件中不能在使用template模板

functional:true这个必须要(表示该组件是纯函数组件，会进行检查，只能用 props 而不能使用组件内部的 state)