分页组件传参

组件通信：
父 -> 子 props:[‘自定义组件名称’,‘组件的内容(对象的形式)’]
父级调用子元素， 通过子元素的属性来传入数据
子级内部通过props来接收对应的数据

         子 -> 父  //$emit(事件名称，事件所需要的参数): 
             注意： vue中数据默认是单向流动，只能父到子直接传递，但是子到父不能直接修改。
             原因： 因为父级的数据不一定只是某个子级在使用，也许还会有其他的子级也在使用这个数据，
                    如果子级内部可以随意修改父级的数据，很容易就会出现数据混乱

             解决： 如果子级想修改数据，那么需要子级去通知父级，父级接收到这个通知后，再去决定是否修改
              通知的方式： (自定义) 事件机制

 <style>

        .pagination a{
            padding:5px 12px;
            border: 1px solid #3ba9ff;
            text-decoration: none;
            margin:5px;
        }

        .pagination a.active {
            background: #33bbaa;
            color: white;
        }

    </style>

 <div id="app">

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

        <k-pagination :pages="uPages" :page="uPage" @prevpage="prevpage"  @changepage="changepage"></k-pagination>
    </div>

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

    <script>
        Vue.component('k-pagination',{
            props:['pages','page'],
            template:`
                <div class="pagination">
                   <a href="" @click.prevent="prev">上一页</a>

                   <a href="javascript:;" 
                      v-for="p of pages" 
                      :class="{'active': p === page}"
                      @click='gotoPage(p)'
                    >{{p}}</a>

                   <a href="">下一页</a>
            </div>
            `,
            methods: {
                gotoPage(p){
                    console.log(p);

                    //$emit(事件名称，事件所需要的参数): 
                    this.$emit('changepage',p);
                },
                prev(){
                    this.$emit('prevpage',this.page - 1);
                }
            },
        });

        let app = new Vue({
            el:"#app",
            data:{
                users:[
                    {id:1, name:"张三"},
                    {id:2, name:"李四"},
                    {id:3, name:"王五"},
                    {id:4, name:"马六"},
                    {id:5, name:"老七"},
                    {id:6, name:"老八"},
                    {id:7, name:"老九"},
                    {id:8, name:"老幺"}
                ],
                uPage:1, //当前页数
                prePage:3, // 每页显示多少条
                // uPages:10
            },
            computed: {
                uPages(){ // 总页数
                    return  Math.ceil(this.users.length / this.prePage);
                },
                showUsers(){
                    let start = (this.uPage - 1) * this.prePage

                    // slice(start,end)
                    return this.users.slice(start,start + this.prePage);
                }   
            },
            methods: {
                changepage(page){
                    console.log('子级修改了page',page);
                    this.uPage = page;                
                },
                prevpage(page){
                    if(page > 0){
                        this.uPage = page;
                    }
                }
            },
        });

    </script>