vue组件 - 函数属性值的传递问题

Question

测试地址：https://codesandbox.io/s/js-p...

给自定义组件的 onChange 属性传递函数，

  <form-input 
    type="text"
    label="标签"
    :value="inputVal"
    :onChange="onChange"
  />

函数定义在 methods 域，

new Vue({
  el: '#container',
  data() {
    return {
      inputVal: 'haha'
    }
  },
  methods: {
    onChange(p) {
      console.log('jafas')
    }
  }
});

可是事件触发时却报函数需要名字的错误，实在想不明白为什么。

自定义组件如下：

Vue.component('form-input', {
  props: {
    label: String,
    value: String,
    onChange: {
      type: Function,
      default: () => {}
    },
    placeholder: String,
    type: {
      type: String,
      default: 'text'
    },
  },
  template: `
      <div class="bzq_input">
        <label :for="label" class="form-label">{{label}}</label>
        <input :type="type" class="form-control" :id="label" :placeholder="placeholder"
        :value="value"
        @change="onChange"
        >
      </div>
    `
});

Answer 1

on-change
在html中需要用短横线形式

Answer 2

html不区分大小写，你把form组件里的onChange改成onchange也可以