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

• Z时代
• 2024-01-10
• 分类：技术分享

测试地址：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>
`
});

回答

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

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

以上是 vue组件 - 函数属性值的传递问题 的全部内容， 来源链接： utcz.com/a/79274.html