因为不推荐直接使用redux，小项目自己实现即可。
写了一个分页样式，不想每个vue文件都写一遍，于是打算组件。
有共性的才能抽离成为组件，对于分页操作，只关心三要素：当前页码，分页大小，总数量。
因此子组件先在props定义这三个值，我这里统一放到pageInfo对象了。
1
2
3
4
5
6
7
| props: {
pageInfo:{
total_nums:'',
currentPage:'',
pagesize:''
}
},
|
然后使用this.$emit(）的方法向父组件传递变量，我这边把三个变量作为一个整体来传了。
子组件内容如下
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
| <template>
<div class="block" style="padding-top: 20px">
<el-pagination
id="haishiwode"
background
:total="pageInfo.total_size"
:current-page.sync="pageInfo.currentPage"
:page-sizes="[5, 10, 50, 100]"
:page-size="pageInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: "tablepagination",
props: {
pageInfo:{ //这个就是父组件中子标签自定义名字
total_nums:'',
currentPage:'',
pagesize:''
}
},
methods: {
handleSizeChange: function (size) {
this.pageInfo.pagesize = size;
this.$emit("aaa",this.pageInfo);//自定义事件 传递值“子向父组件传值”
},
handleCurrentChange: function (currentPage) {
this.pageInfo.currentPage = currentPage;
this.$emit("bbb",this.pageInfo);//自定义事件 传递值“子向父组件传值”
},
}
}
</script>
|
上面自定义事件名字任意，不要跟已有的变量名和方法名重名了！不然会报 handler.apply is not a function
父组件
1
2
3
4
5
6
7
8
9
| 使用import ... from ... 引入， 如 import tablepagination from "TablePagination"
使用components返回
components: {
"tablepagination": tablepagination
},
template中使用，以及数据绑定
<tablepagination v-bind:pageInfo="pageInfo" v-on:pageInfo="updatePageInfo" />
// updatePageInfo($event)接受传递过来的文字
|
上面v-on:pageInfo=”updatePageInfo”把子组件信息传给父组件
v-bind:pageInfo=”pageInfo”把父组件信息传给子组件
