【vue】.sync修饰符与watch侦听器一起“食用”的方式

前言：本文记录作者在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,
	},
	pageInfo:{
		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监听的完美搭配就做好了！

最后来复习一下：如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。