【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,
	},
	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监听的完美搭配就做好了!

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

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值