vue 2.3 更新 组件间的数据“双向绑定“ .sync 修饰符

版权声明： https://blog.csdn.net/BookNoteY/article/details/81985569

官方文档链接

https://cn.vuejs.org/v2/guide/components-custom-events.html

调用组件

<!--使用.sync 实现双向绑定 使用 v-on 实现自定义事件 在子组件调用自定义的事件-->
<page :total.sync="page.total" v-on:pageChange="page.pageNum = $event" v-on:pageSizeChange="page.pageSize = $event"></page>

import page from '../../components/page.vue';
export default{
    components:{
        page
    },
    data(){
        return {
            loading:false,
            page:{
                total:40000,
                pageNum:1,
                pageSize:this.config.page.size
            }
        }
    }, ......

this.$emit('update:total', 3000);//修改 父组件里的 total 这个时候 父组件 里的 page.total 和 子组件里的 total 里面的值都改变了

组件 源码

<template>
    <div>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                prev-text="上一页"
                next-text="下一页">

        </el-pagination>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                pageSizes:this.config.page.sizes,
                pageSize:this.config.page.size,
                page:this.pageNum
            }
        },
        props:{
            total:Number
        },
        methods:{
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.$emit('pageSizeChange',val);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.$emit('pageChange',val);
                this.$emit('update:total', 3000);
            }
        }
    }
</script>