在做商城项目的checkBox的时候,按照自己的思路使用useVModel出现问题,返回值一直为true,代码如下
//我的代码
const checked = useVModel(props, "modelValue", emit);
const changeChecked = () => {
checked.value = !checked.value;
//因为传过来的modelValue为true,这里我认为是可以取反赋值的
//然而log输出的一直为false
console.log(checked);
emit("change", checked.value);
};
//文档代码
const checked = useVModel(props, 'modelValue', emit)
const changeChecked = () => {
const newVal = !checked.value
checked.value = newVal
emit('change', newVal)
}
我当时还不理解,为什么要定义一个中间变量newVal,我觉得我的操作和文档的是一样的,因为我理解赋值之后 newVal === checked.value,所以我回传了修改之后的checked.value,发现是不生效的。
我将其修改为 !checked.value,生效
//修改后生效代码
const checked = useVModel(props, "modelValue", emit);
const changeChecked = () => {
checked.value = !checked.value;
emit("change", !checked.value);
};
查阅文档得知,并log打印得知,useVModel返回的是计算属性,而不是ref,并不能直接修改check.value的值
一开始传checked.value一直为true的原因就是不可直接修改值
其实一想也对:直接修改就等于是改了props的值,这在Vue中是不允许的,需要emit通知父组件改值
文档的意思是
const checked = useVModel(props, 'modelValue', emit)
const changeChecked = () => {
const newVal = !checked.value
// 通知父组件,所以是可以直接修改值的
checked.value = newVal
// 让组件支持change事件
emit('change', newVal)
}
为什么不直接change事件即可?
做到另一个类似的功能的时候,终于大致有了些模糊的理解:
// 单纯通知父组件,本组件的值在函数结束前并不会立即变化
checked.value = newVal
// 让组件支持change事件,这是为了让父组件能拿到子组件的值,还可以拿到自己的值作为参数传递
emit('change', newVal)