父组件传子组件要传多个的话用v-bind:page.sync=

作者: 流泪手心_521 | 来源:发表于2020-08-30 09:41 被阅读0次

父组件传子组件要传多个的话用v-bind:page.sync=
2018-10-31 vue框架（1）组件
vue复习
vue的基本知识点总结
vue 子传父/父传子续更
props、vuex、bus(Eventbus)、事件订阅obs
vue 中传值（父传子、子传父（传递多个事件）、eventBus
vue 子传父与父传子与子传子
九、简单的react父子组件
vue 组件通信

1.在子组件只需要this.$emit('update:'page'',p)

methods: {
               changePage(p) {
                   this.$emit('update:page', p);
               }
           }

2.全部源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pagination {
            margin: 30px 0 10px 0;
        }
        .pagination span {
            margin-right: 5px;
            padding: 10px 20px;
            border: 1px solid #000;
        }
        .pagination span.current {
            background: rgba(0,0,255, .5);
        }
    </style>
</head>
<body>

    <div id="app">
        <ul>
            <li v-for="user of showUsers" :key="user.id">
                {{user.id}} - {{user.username}}
            </li>
        </ul>

        <hr>

        <kkb-pagination :page.sync="userPage" :page-size="userPageSize" :total="users.length"></kkb-pagination>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.component('kkb-pagination', {
            props: {
                total: {
                    type: Number,
                    default: 0
                },
                pageSize: {
                    type: Number,
                    default: 2
                },
                page: {
                    type: Number,
                    default: 1
                }
            },
            data() {
                return {
                    pages: Math.ceil( this.total / this.pageSize )
                }
            },
            template: `
                <div class="pagination">
                    <span
                        v-for="p of pages" :key="p"
                        :class="{current: p === page}"
                        @click="changePage(p)"
                    >{{p}}</span>
                </div>
            `,
            methods: {
                changePage(p) {
                    this.$emit('update:page', p);
                }
            }
        });

        new Vue({
            el: '#app',
            data: {
                users: [

                    {id: 1, username: 'zMouse', gender: '男'},
                    {id: 2, username: 'mt', gender: '男'},
                    {id: 3, username: 'haizi', gender: '男'},
                    {id: 4, username: 'liwei', gender: '男'},
                    {id: 5, username: 'zhangsan', gender: '男'},
                    {id: 6, username: 'lisi', gender: '男'},
                    {id: 7, username: 'wangwu', gender: '男'}

                ],
                userPage: 1,
                userPageSize: 2
            },
            computed: {
                showUsers() {
                    let start = (this.userPage - 1) * this.userPageSize;
                    let end = start + this.userPageSize;
                    return this.users.filter( (user, index) => index >= start && index < end );
                }
            }
        })

    </script>

</body>
</html>