vue3的基础使用

emit的正确姿势

以分页为例

提示

Vue 的事件系统对大小写敏感，且推荐使用 kebab-case 命名事件。同时 v-model:xxx 已经内部处理了 update:xxx 事件的绑定，无需重复声明。

定义

// 定义事件
// 定义事件
const emit = defineEmits(['update:pageSize','update:currentPage'])
//当前分页
const currentPage = defineModel<number>('currentPage',{
	default:1
})

//分页条数
const pageSize = defineModel<number>('pageSize',{
	default:10
})

const handleSizeChange = throttle((value: number) => {
  //console.log(`每页 ${value} 条`)
	emit('update:pageSize',value)
},500)

const handleCurrentChange = throttle((value: number) => {
  //console.log(`当前页: ${value}`)
	emit('update:currentPage',value)
},500)

监听

<YhPaginate  v-model:currentPage="currentPage" :page-sizes="[5,10,20,30,40,50,100]" v-model:pageSize="pageSize"  :total.sync="total" />

//侦听分页变化
watch([currentPage, pageSize], ([newPage, newSize]) => 
{
  // 处理分页逻辑
	if(newPage)
	{
		//console.log(newPage)
		currentPage.value = newPage
	}
	if(newSize)
	{
		//console.log(newSize)
		pageSize.value = newSize
	}
	getSystemConfigList()

})