基於vue3的一個簡單分頁 父子元件通訊傳值

父元件

 1 <template>
 2   <div class="top">
 3     
 4   </div>
 5   <pagination :total="total" :pageNo="pageNo" :pageSize="pageSize" @event="eventData"></pagination><!-- 使用元件 -->
 6 </template>
 7 
 8 <script >
 9 import { defineComponent,ref } from 
 
"vue"
10 import Pagination from "@/components/Pagination.vue"            //引入元件
11 export default {
12   components:{                                                  //註冊元件
13     Pagination
14   },
15   setup() {
16     const pageNo = ref(1)           //當前頁
17     const pageSize = ref(10)        //每頁的數量
18     const total 
 
= ref(100)          //總數量
19 
20     const eventData = (data)=>{ //子元件傳值觸發
21         console.log(data,"子元件傳來的值")
22     }
23 
24     return {
25         pageNo,
26         pageSize,
27         total,
28         eventData
29     }
30   }
31 }
32 </script>
33 
34 <style lang="scss" scoped>
35 .top
 
{
36     height: 600px;
37 }
38 
39 
40 </style>

子元件

  1 <template>
  2     <div class="out">
  3         <div class="item prev but" @click="prev">上一頁</div>
  4 
  5         <!-- 迴圈計算出來頁數 -->
  6         <template v-for="(item,index) in pageArr" :key="index">
  7             <div 
  8                 class="item"
  9                 :class="['item',item == newPage?'num':'']"
 10                 @click="selectNum(item)"
 11             >
 12                 {{item}}
 13             </div>
 14         </template>
 15 
 16         <div class="item next but" @click="next">下一頁</div>
 17 
 18         <div class="item page">共{{page}}頁</div>
 19 
 20         到
 21         <input class="item skipInput" type="number" v-model="skipNum" >
 22         頁
 23 
 24         <div class="item skip" @click="skip">確定</div>
 25     </div>
 26 </template>
 27 
 28 <script>
 29 import { defineComponent,ref,onMounted } from "vue"
 30 export default {
 31 name:'Pagination',
 32 props:{                     //定義預設的型別及值
 33     pageNo:{
 34         type:Number,
 35         default:1
 36     },
 37     pageSize:{
 38         type:Number,
 39         default:10,
 40     },
 41     total:{
 42         type:Number,
 43         default:0,
 44     }
 45 },
 46 setup(props,{emit}){
 47     // console.log(props.total,props.pageSize,props.pageNo,"============")             //vue3的檢視父元件傳來的值
 48 
 49     const page = ref()                  //計算出來頁數
 50     const pageArr = ref([])             //排列出來的頁數
 51     const skipNum = ref()               //填入的跳轉頁數
 52     const newPage = ref()               //當前的頁數
 53 
 54     newPage.value = props.pageNo            //將預設值賦給子元件內的預設值
 55     page.value = parseInt((props.total + props.pageSize - 1) / props.pageSize)      //計算展示出來頁碼有多少
 56     for(let i = 0;i<page.value;i++){        //將計算出來的頁碼迴圈到排列使用的數組裡面
 57         pageArr.value.push(i+1)
 58     }
 59     
 60     const prev = ()=>{                              //上一頁
 61         if(newPage.value ==1){
 62             console.log("已經是第一頁了")              //替換為ui庫裡面的全域性彈框元件裡面（以下同理）
 63             return
 64         }else{
 65             newPage.value -= 1
 66         }
 67         trigger(newPage.value)                      //將計算好的值傳入到觸發父元件方法裡面
 68     }
 69     const next = ()=>{                              //下一頁
 70         if(newPage.value ==page.value){
 71             console.log("已經是最後一頁了")
 72             return
 73         }else{
 74             newPage.value += 1
 75         }
 76         trigger(newPage.value)
 77     }
 78     const selectNum = (data)=>{                     //選擇數字
 79         trigger(data)
 80     }
 81     const trigger = (value)=>{                       //去觸發父元件方法函式
 82         newPage.value = value
 83         let params = {
 84             newPage:parseInt(value)
 85         }
 86         emit('event',params)
 87     }
 88     const skip = ()=>{                                //點選確定
 89         if(typeof(skipNum.value) != 'number'){
 90             console.log("不是一個數字")
 91             return
 92         }else if(skipNum.value > page.value){
 93             console.log("不能大於總頁數")
 94             return
 95         }else if(skipNum.value < 1){
 96             console.log("不能小於1")
 97             return
 98         }
 99         trigger(skipNum.value)
100     }
101     return {
102         page,
103         pageArr,
104         skipNum,
105         newPage,
106         selectNum,
107         prev,
108         next,
109         trigger,
110         skip
111     }
112 }
113 }
114 </script>
115 
116 <style lang="scss" scoped>
117 .out{
118     width: 100%;
119     height: 50px;
120     display: flex;
121     justify-content: flex-end;
122     align-items: center;
123 }
124 .item{
125     margin: 0 10px;
126     width: 34px;
127     height: 34px;
128     background: linear-gradient(0deg, #DADADA, #F5F5F5);
129     box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
130     border-radius: 6px;
131     display: flex;
132     justify-content: center;
133     align-items: center;
134     font-size: 18px;
135     font-family: Arial;
136     font-weight: 400;
137     color: #2E2E2E;
138 }
139 .item.num{
140     background: #B9905F;
141     color: #fff;
142 }
143 .item.but{
144     width: 80px;
145 }
146 .item.page{
147     width: 80px;
148     background: #fff;
149     box-shadow:none;
150     border: none;
151 }
152 .item.skipInput{
153     margin: 0 3px;
154     width: 50px;
155     height: 34px;
156     padding: 0 3px;
157     margin: 0 0;
158     background: #E6E6E6;
159     border: #E6E6E6;
160     /* box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.35); */
161     border-radius: 6px;
162     outline-color: #E6E6E6;
163 }
164 .item.skip{
165     width: 50px;
166     background: #B9905F;
167     color: #fff;
168 
169 }
170 </style>