v-model如何绑定自定义事件？
0
悬赏园豆：5
[已解决问题]
解决于 2023-01-03 12:50
Element Plus有一个Pagination组件，Pagination组件可以绑定4个事件：size-change、current-change、prev-click、next-click。但是在Element Plus文档的这4个事件的介绍下面有个警告：以上事件不推荐使用（但由于兼容的原因仍然支持，在以后的版本中将会被删除）；如果要监听current-page和page-size的改变，使用v-model双向绑定是个更好的选择。
请问如何用v-model绑定size-change事件和current-change事件？
最佳答案
1
<template>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
layout="total, sizes, prev, pager, next, jumper" :total="400" />
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
// 通过v-model绑定分页参数
const currentPage = ref(5)
const pageSize = ref(100)
// 通过监听读取到当前分页参数，然后加载table
watch(currentPage, (newVal) => {
console.log(newVal)
})
watch(pageSize, (newVal) => {
console.log(newVal)
})
</script>
// 既然通过v-model来实现，监听自然不可少了，不过还是没有事件来得方便，看你想用哪种了。
收获园豆：5
原来是自己手动监听值的变化，那确实不如事件直观方便。
