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 = currentthis.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)}}}}