index.vue
3.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import Test from '@/components/Test/index.vue'
import Pagination from '@/components/Pagination/index.vue'
// import { onMounted, reactive, ref } from 'vue'
// const pageSizes = reactive([10, 20, 40, 30])
// const pageSize = ref(5)
// const currentPage = ref(1)
// const getSizeChange = (size) => {
// console.log('size change')
// console.log(size)
// console.log(pageSize.value)
// pageSize.value = size
// }
// const getCurrentChange = (cur) => {
// console.log('cur change')
// console.log(cur)
// console.log(currentPage.value)
// currentPage.value = cur
// }
// 上级页面和下级组件中的函数、数据交互，组件视图上加ref
const testExpose = ref(null)
onMounted(() => {
console.log(testExpose.value)
console.log(testExpose.value.count)
testExpose.value.singleFunc()
})
const changeCount = () => {
testExpose.value.addCount()
console.log(testExpose.value.count)
}
const acceptEmit = (value) => {
console.log('页面中监听组件的事件')
console.log(value)
}
const getTitle = (v) => {
console.log('新的回调监听')
console.log(v)
}
const data = reactive({
limit: true,
maxSize: 10010,
collections: ['苹果', '胡椒'],
title: ''
})
const pageData = reactive({
total: 108,
page: 1,
pageSize: 10
})
const pageDataStore = reactive({
total: 178,
page: 1,
pageSize: 10
})
const handlePageChange = (page, size, tagName) => {
console.log('分页的回调')
console.log(page)
console.log(size)
console.log(tagName)
pageData.page = page
pageData.pageSize = size
}
const test = (page, size, tagName) => {
console.log('分页的回调')
console.log(page)
console.log(size)
console.log(tagName)
pageDataStore.page = page
pageDataStore.pageSize = size
}
</script>
<template>
<div style="background-color: lightgreen; padding: 20px;">
<p>这是组件外的上级页面</p>
<el-button type="warning" @click="changeCount">改组件里的count</el-button>
<!-- <Test ref="testExpose" :maxSize="10086" :limit="true" :collections="['厕所', '阳台']" @emitFunc="acceptEmit"></Test> -->
<Test ref="testExpose" v-model:title="data.title" @update:title="getTitle"></Test>
<!-- <Test ref="testExpose" :maxSize="data.maxSize" :limit="data.limit" :collections="data.collections" @emitFunc="
acceptEmit"></Test> -->
</div>
<!-- {{pageSize}} |||| {{currentPage}} -->
<!-- {{hello.total}} -->
<Pagination tagName="first" :total="pageData.total" :currentPage="pageData.page" :pageSize="pageData.pageSize" @pageChange="handlePageChange"></Pagination>
<Pagination tagName="second" :total="pageDataStore.total" :currentPage="pageDataStore.page" :pageSize="pageDataStore.pageSize" @pageChange="test"></Pagination>
<!-- <Pagination :total="100" :pageSize="pageSize" :currentPage:update="currentPage" :pageSizes="pageSizes" @handleSizeChange="getSizeChange" @handleCurrentChange="getCurrentChange"></Pagination> -->
</template>