vue的动态编译

最新推荐文章于 2024-07-06 09:03:33 发布

栗子童鞋

最新推荐文章于 2024-07-06 09:03:33 发布

阅读量3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/love464524131/article/details/85328587

版权

本文探讨了在Vue中实现动态编译的方法，包括四种不同的实现方式：通过配置文件实现列的定制，动态添加组件调用回调，状态管理，以及利用作用域插槽。在实际应用中，例如在表格组件中，这些方法允许创建可响应事件的自定义列。文中还提到了如何在父组件中定义template并通过scope接收子组件变量，以及子组件如何传递变量，为理解Vue的动态编译和组件交互提供了指导。

摘要由CSDN通过智能技术生成

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

实现方式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'}
        ]
      }
    }

之后在子组件使用