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