组件的props属性

比眉伴天荒 2024-02-05 11:11 6阅读 0赞

**目录**

1：使用props的作用：

2：props自定义属性的用法：

3：集合v-bind使用自定义属性：

4：props自定义属性是只读的：

5：default默认值：

6：type值类型：

7：required必填项校验：

--------------------

![dfc70fead3524163927550addaf9ff9b.png][]

### 1：使用props的作用： ###

props是组件的自定义属性，在封装通用组件的时候，合理使用props可以极大的提高组件的复用性！它的语法格式如下：

export default {
        //组件的自定义属性
        props:['自定义属性A','自定义属性B','其他自定义属性...'],
        
        //组件的私有数据
        data(){
            return {}
        }
    }

### 2：props自定义属性的用法： ###

现在Left和Right两个组件都需要用到封装的组件Test，组件Test中的数据源中的数据默认是0，组件Left想要用到组件Test中的初始数据为10，组件Right中想要用到组件Test中的初始数据为100，这时可以在组件Test中自定义属性props，组件Left和Right通过组件Test中自定义属性的参数进行传值。**如果很多地方都需要用到封装的特定组件可以将该组件进行全局注册方便使用。**

![e079232f4caa49c8b28ffdcab7d94e81.png][]

### 3：结合v-bind使用自定义属性： ###

![b6c76b9631aa49969a92cfff86989e20.png][]

通过props这个属性进行传入的值默认是字符串，可以使用v-bind使其改变为数字，**v-bind的简写形式：**

![8d4dcdd2c47945ea8ea844e80a53fd90.png][]

### 4：props自定义属性是只读的： ###

通过props传入的值只能用于读，不能进行写，如果进行操作传入的值写会报错。可以通过this.属性名将值赋给data区域中的其他属性。

![4839da84520b4419b1780a0c658b0915.png][]

### 5：default默认值： ###

如果不设置值可以设置default属性设置默认值

props的两种格式

**props:\[\] 数组只能接收值**

**props:\{\}对象形式可以设置默认值**

在声明自定义属性时，可以通过default来定义属性的默认值。示例代码：

![5e4df7554b8b442f977b95ae539af70c.png][]

![9ec81f312e144d7592678d9e815ce38d.png][]

### 6：type值类型： ###

**规定接收值的类型，如果传入的值和规定的类型不匹配会报错**

![ab4acb4de2e64972ac61399b0381c668.png][]

### 7：required必填项校验： ###

**如果不进行传值报错提醒**

![3475a121a2974156b70151479626c79f.png][]

[dfc70fead3524163927550addaf9ff9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/6190c53834f2468abe12e527c45ab067.png
[e079232f4caa49c8b28ffdcab7d94e81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/fca093865fd64544a3214fcdfdbc0932.png
[b6c76b9631aa49969a92cfff86989e20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/8a09e61400974eb5bfcb82732e45c07e.png
[8d4dcdd2c47945ea8ea844e80a53fd90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/6822469c5c7e4a37a430d2e88a077e69.png
[4839da84520b4419b1780a0c658b0915.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/016707f91aa5416fb3ac33395c4c8cf6.png
[5e4df7554b8b442f977b95ae539af70c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/be72b2e71c77427ca6159e6190485324.png
[9ec81f312e144d7592678d9e815ce38d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/59c320e0fe374e2faab2cdbddb355da1.png
[ab4acb4de2e64972ac61399b0381c668.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/eee9165b2d3f48b6b8389142af04aaf6.png
[3475a121a2974156b70151479626c79f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/1ebc58705d1a469689a210be4862ff04.png