vue父子传参的方式——Prop

Prop

每一个组件都有一个props的属性，用来接收外部传递的数据

这里我拿一个分页组件为例：

一、基础语法

1、父组件传递数据

父组件在向子组件传递数据时，基础语法如下：

<template>
    <div>
        <common-page :pagination="pagination" @change="handlePageChange"/>
    </div>
</template>

<script>
import CommonPage from '@/components/common/CommonPage'
export default {
    components: {
        CommonPage,
    },
    data() {
        return {
            /* 分页参数 */
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
                pageSizeOptions: [10, 20, 30, 50, 100],
                showQuickJumper: true,
                showSizeChanger: true,
            },
        };
    },
    methods: {
        //分页、筛选变化时触发
        handlePageChange({ pageSize, current }) {
            this.pagination.current = current
            this.pagination.size = pageSize
        },
    }
};
</script>

传递的数据中，除了静态的字符串以外，其他所有数据在传递时，都需要通过v-bind进行传递。

2、子组件接受数据

export default {
    props: {
        pagination: {
            type: Object, // 指定属性的类型为对象。
            required: true, // 指定属性是必需的，即在使用该组件时必须传递这个属性。
        },
    }
}

3、子组件访问 Props

<template>
    <div class="pagination">
        <el-pagination @size-change="handleSizeChange" 
                       @current-change="handleCurrentChange"
                       :page-sizes="pagination.pageSizes?pagination.pageSizes:[5, 10, 20, 30, 40, 50]"
                       :page-size.sync="pagination.pageSize"
                       :current-page.sync="pagination.current"
                       :pagerCount="pagerCount"
                       :small="small"
                       :layout="layout"
                       :total="pagination.total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'common-page',
        props: {
            pagination: {
                type: Object,
                required: true,
            },
            layout: {
                type: String,
                default: 'total, sizes, prev, pager, next, jumper',
            },
            small: {
                type: Boolean,
                default: false,
            },
            pagerCount: {
                type: Number,
                default: 7
            },
        },
        mounted() {
            console.log(this.pagination, this.pagerCount)
        }
    }
</script>

二、单向数据流

概念

单向数据流，指的是父组件将数据通过 props 传递给子组件后，父组件更新数据， 子组件 props 的数据会同步更新，但是，反过来则不行，子组件不能修改 props 数据。

当父组件将数据传递给子组件后，父组件如果更新数据，子组件会同步更新，但是，子组件中不能修改 props 接收的数据。

结论：子组件中不能修改 Prop 的数据

解决方案

如果确实有需要修改 props 的要求，可以有如下两种解决方案：

1、将 props 赋值给 data

export default {
    props: {
        pagination: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            sonPagination: this.pagination
        }
    }
}

2、将 props 赋值给 computed

export default {
    props: {
        pagination: {
            type: Object,
            required: true,
        },
    },
    computed: {
        sonPagination() {
            return this.pagination
        }
    }
}

三、Prop 的验证

  export default {
        props:{
            name:String,
            age: [Number,String],
            num:{
                type:Number,    //类型
                required:true,  // true为必传
            },
            gender:{
                type:String,
                default:"保密" //默认值
            },
            // 如果默认值是数组或对象
            friends:{
                type:Array,
                default: ()=>["张三","李四"],
            },
            teacher:{
                type:Object,
                default:()=>({name:"王五"}),
            },
            classes:{
                validator(value){
                    return ['web21','web22','web23'].includes(value)
                }
            }
        }
    }