关于Vue3中defineEmits的一个bug

118 阅读1分钟

我也不知道这算不算是一个bug,可能是一种机制。 先看代码

组件:

const emits = defineEmits(['update:selectList']);
// 多选表格
const selectionChange = (e) => { // 多选
    console.log(e.detail.index)
    emits("update:selectList", e.detail.index);
}

页面:

<editor-table v-model:selectList="selectList" />

const selectList = ref([]);
watch(()=>selectList.value, (newV)=>{
	console.log(selectList.value);
},{
	deep: true,
	immediate: true
})

此时控制台打印的结果就是,当组件改变selectList有值的时候,页面是可以接收到的,但是一旦传值为空数组,页面就再也接不到值了,即使后面有非空数组传入。 image.png

但是当你将代码这样写

// 多选表格
const selectionChange = (e) => { // 多选
	console.log(e.detail.index);
	if(e.detail.index.length <= 0) {
		emits("update:selectList", []);
	}else{
		emits("update:selectList", e.detail.index);
	}
}

image.png 结果回变得截然不同,手动传入空数组不会有任何问题,这个问题让我百思不得其解。 有大佬愿意为我解答一下吗