vue动态编译

动态编译的需求：
如在写一个表格组件时，我们可能需要表格的某一列是可定制化的，比如这一列可实现点击响应一个事件，要实现这样一个需求，可通过写配置文件的方式实现

实现方式1

data(){
      let me = this
      return {
        name:'点我',
        list:[
          {name:'cccc11212121', callback:function(value){
            return {
              template:`<a href="javascript:void(-1)" @click="callback(value)" >{{value.name}}</a>`,
              methods:{
                callback:me.showName
              },
              data(){
                return {
                  value:value
                }
              }
            }
          }},
          {name:'bbbbb'},
          {name:'ccccc'},
          {name:'ddddd'},
          {name:'eeeee'},
          {name:'fffff'},
          {name:'ggggg'}
        ]
      }
    }

之后在子组件使用is动态添加组件方式调用这个回调函数

<component :is='o.callback(o)'></component>

实现方式2

通过vuex方式管理状态

实现方式3

通过vue render方法实现，参看elementui源码

实现方式4

通过作用于插槽实现
在父组件中定义template，通过scope接收子组件的临时变量

<u-list :datas="list" @clickme="showName()">
      <template slot="callback" scope="props">
        <a href="javascript:void(-1)" @click="show(props.text)" >{{props.text["name"]}}</a>
      </template>
    </u-list>

接着在子组件中向父组件传递变量

<li v-else="o.callback">
        <!-- <component :is='o.callback(o)'></component> -->
        <slot name="callback" :text="o"></slot>
      </li>

参考
vue动态组件
vue作用域插槽
elementui