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)}}}}