将事件传递给 vue 中的渲染组件答案

【问题标题】：pass event to a rendered component in vue将事件传递给 vue 中的渲染组件
【发布时间】：2020-09-04 11:40:08
【问题描述】：

我正在尝试创建一个渲染组件，当我点击它时它会做一些事情：

// A normal Vue component using a render function
Vue.component('greeting', {
    methods: {
        sayHello(){
            alert('hello')
        }
        
    },
    render(createElement){
        var self = this
        return createElement(
            'button', 
            {
                '@click': self.sayHello
            },
            'if you click here I will say hello')
    }
})


new Vue({ 
    el: '#app'
})

当我点击按钮时，我期待一个警报。据我所知，这将呈现类似

<button @click="sayHello" />

方法 sayHello 是在 Vue 实例中定义的。

为什么这不起作用？

https://codepen.io/dvdgdnjsph/pen/NWNwYOQ

【问题讨论】：

为什么不直接使用template创建按钮？
@Vipulw 我正在处理一些更复杂的事情，需要将事件传递给渲染函数。这应该是一个最小的例子，没有什么用处。

标签： javascript vue.js

【解决方案1】：

看起来传递的事件需要指定为'on'，像这样：

{ 
  on: {
   click: somefunction
  }

}

https://codepen.io/dvdgdnjsph/pen/NWNwYOQ

https://v3.vuejs.org/guide/migration/render-function-api.html#_3-x-syntax-2

【讨论】：

【解决方案2】：

我在这个小提琴中创建了你的示例的工作副本。我已经修改了我们编写点击事件的方式。参考下面的代码sn-p。

Working Button Click via Render Function

Vue.component('DraggableList', {
  methods: {
    sayHello() {
      alert('hello')
    }
  },
  render: function(createElement) {
    var self = this;
    return createElement(
      'button', // tag name
      {
        on: {
          click: this.sayHello
        }
      }, 'if you click here I will say hello'
    )
  }
})

new Vue({
  el: '#app'
})

.grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 2em;
    grid-gap: 1em;
}
h1{
    margin: 0;
    padding: 0;
}
.grid input{
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: center;
    font-size: 1.5em;
}
.polite{
    font-family: cursive;
    color: gray;
}
.rude{
    font-family: serif;
    font-weight: bold;
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="grid">
    <draggable-list></draggable-list>
  </div>
</div>

【讨论】：

请解释你的答案和你做了什么。
@Dharman 我与问题集中的人讨论了方法，然后只给出了解决方案。此外，通过包含代码 sn-p 可以很清楚地理解。下次记得。