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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【微公益】【866】【每日经典】【20170907易经06】 讼卦 (天水讼)乾上坎下 《讼》:有孚窒惕,中吉,终...
    北冥_鲲阅读 241评论 0 1
  • 属原创,欢迎转,但要注明出处。 说AI的事前,先来讲个故事: 前几年楼主公司所在地的物业入驻。。。一切也没电子化,...
    lizzieflh阅读 249评论 0 0
  • 前些天,朋友晒着,毕业了,后面加个大大的微笑。以前带过高三的孩子晒着:毕业时的大餐,人生头一次大醉,我们毕业了。一...
    东宝alex阅读 217评论 0 1
  • 即便再悲伤也要勇敢活下去,这是人类的诅咒,但一定,也是一种祝福。 新海诚,一个画风唯美、立意深刻、故事自然的导演,...
    那菈阅读 274评论 0 0
  • 你有freestyle吗? 现下正是房地产市场最火热的时候,却也是天气最热的季节,为此房产中介花样百出,IJOYE...
    亲子与教育阅读 417评论 0 0