这是我在Vuejs中简单的功能组件
import { Label, Input, Checkmark } from "./styles";
export default {
functional: true,
model: {
prop: "checked",
event: "change"
},
props: {
checked: Boolean
},
// eslint-disable-next-line
render(h, { props, listeners}) {
console.log(listeners);
const changeHandler = listeners.change ? listeners.change : () => {};
return (
<Label>
<Input
type="checkbox"
checked={props.checked}
onChange={e => {
console.log("checked", e.target.checked);
changeHandler(e);
}}
/>
<Checkmark class="checkmark" />
</Label>
);
}
};
像这样使用时,该组件根本不会console.log
<VCheckbox
checked={this.checkSelections[idx]}
onChange={e => {
this.$set(this.checkSelections, idx, e.target.checked);
}}
/>
我正在使用Vuejs-2.5.x
如果我用console.log登录我的listeners
,他们肯定会记录更改。
第二,如果我改用nativeOnChange
,则会触发。
最后,重要的是,我也有一个同样的按钮组件(functional),它可以与onClick
一起正常工作(在那里不使用native)。有人可以让我知道发生了什么吗?
更新-
与nativeOnMouseover
相似。