前言:本文记录作者在vue项目中使用sync修饰符时,父组件中watch监听事件无效并解决的过程,如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。
一、.sync修饰符
我直接贴官方截图:
官方链接:.sync修饰符
二、作者的使用
假设需求:实现列表翻页功能
详情:
1、列表页面实现列表数据请求(getList)、根据pageInfo.page数据变化更新页面数据;
2、当page数据改变时,翻页组件通知列表组件更新页面;
由于要传较多的数据,作者选择了“用一个对象同时设置多个 prop”:
// list.vue
<template>
<div>
<PageBox v-bind.sync="pageInfo" />
</div>
</template>
<script>
import PageBox from './components/PageBox.vue'
export default{
methods:{
// 假装请求页面数据
getList(){
const {page,pageSize} = this.pageInfo
console.log('pageInfo===>',page,pageSize)
}
},
watch:{
// 监听data中的数据,无效
pageInfo:{
// 即使用深度监听,还是可以发现并没有效果
handler(newVal,oldVal){
console.log('pageInfo===>',newVal,oldVal)
// 页面改变,重新请求数据
this.getList()
},
immediate: true,
deep: true,
},
// 监听改变的目标值(无效,不符合vue的逻辑)
page:{
// 即使用深度监听,还是可以发现并没有效果
handler(newVal,oldVal){
console.log('pageInfo===>',newVal,oldVal)
// 页面改变,重新请求数据
this.getList()
},
immediate: true,
deep: true,
}
// 正确,可以监听到page数据的变化(作者要解决的痛点就在于此,原先一直无法监听)
'pageInfo.page'(newVal,oldVal){
console.log('pageInfo===>',newVal,oldVal)
// 页面改变,重新请求数据
this.getList()
}
},
data(){
return {
pageInfo:{
page: 1,
pageSize: 10,
}
}
},
components:{
PageBox,
}
}
</script>
下面是PageBox组件:
// PageBox组件
...
props:{
page:{
type: Number,
default: 1,
},
pageSize:{
type: Number,
default: 20,
},
}
methods:{
// 通知list组件更新列表
handlePage:(val){
// 注意更新的是page
this.$emit('update:page',val)
},
// 通知list组件更新列表
handlePageSize:(val){
// 注意更新的是pageSize
this.$emit('update:pageSize',val)
}
}
至此,sync修饰符和watch监听的完美搭配就做好了!
最后来复习一下:如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。