vue.compile字符串模板如何解析@click方法

Question

let compileStr = Vue.compile(this.templateString)this.template = compileStr.rendertemplateString: function (scope) {       let fun = function () {         console.log('afe')       }      return `        <div>           <el-button type="primary" @click="${fun}">查询</el-button>           <el-button type="primary">详情</el-button>         </div>       `     }点击后fun不执行。。。如果修改为${fun()}有报错Invalid handler for event "click": got undefined有没一种方法可以是的能够编译处理，并且点击能正确执行fun？ 我现在用的是把fun方法data里面

Answer 1

`<el-button type="primary" @click="console.log('afe')">查询</el-button>`

最简单的办法, 直接把 fun 的函数体写进@click 里面.

@click="content" 会被编译成这样子:

{  onclick: function () {
    content
  }
}

所以你的写法会变成

{  onclick: function () {    function fun() {      console.log('afe')
    }
  }
}

借助IIFE, 这样写

`<el-button type="primary" @click="(${fun})()">查询</el-button>`// 结果{
  onclick: function () {
    (function fun() {
      console.log('afe')
    })()
  }
}