Vue渲染功能单击处理程序不起作用

Question

我在Vue中使用final String script = "var callback = arguments[arguments.length - 1];\n" + "var rootSelector = \'body\';\n" + "var el = document.querySelector(rootSelector);\n" + "\n" + "try {\n" + " if (angular) {\n" + " window.angular.getTestability(el).whenStable(callback);\n" + " }\n" + " else {\n" + " callback();\n" + " }\n" + "} catch (err) {\n" + " callback(err.message);\n" + "}"; ((JavascriptExecutor) getDriver()).executeAsyncScript(script, new Object[0]); 功能：

render

出于某种原因，它不适用于Vue指令 export default { name: 'TButton', render (h) { return h('button', { 'class': { btn: true } }, this.$slots.default) } } ：

v-on:click

虽然这有效：

t-button.white(@click="alert()") Send // PUG template

Answer 1

虽然文档中没有明确涵盖这一点，但据我所知，事件并未自动绑定到功能渲染的组件。
一种选择是手动传递the data object中的所有默认侦听器。

＆＃13;

＆＃13;

Vue.component('sample', {
  render: function(createElement) {
    return createElement('button', {
      on: this.$listeners
    }, this.$slots.default)
  }
})

new Vue({
  el: '#app',
  methods: {
    foo() {
      console.log('foo called')
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <sample v-on:click="foo()">bar</sample>
</div>

＆＃13;

＆＃13;

＆＃13;