前言：本文記錄作者在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監聽的完美搭配就做好了！
最后來復習一下：如果覺得作者寫的不錯，希望得到您的點贊/收藏/支持，如果有不同意見，歡迎下方評論區留言，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/247177.html
標籤：其他