Блог

Я пытаюсь создать отображаемый компонент, который будет что-то делать, когда я нажимаю на него:

 // 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

Похоже, что переданные события должны быть указаны как ‘on’, вот так:

 { 
  on: {
   click: somefunction
  }

}
  

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

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

Я создал рабочую копию вашего примера в этой скрипке. Я изменил способ записи события щелчка. Смотрите приведенный ниже фрагмент кода.

Щелчок рабочей кнопки с помощью функции визуализации

 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>