15-props配置

野性酷女 2023-10-08 18:07 19阅读 0赞

## **props配置** ##

#### 一、props配置项 ####

`props`配置项让组件接收外部传过来的数据。

定义一个组件：

<template>
      <div>
          <h2>学生姓名：{
       {name}}</h2>
          <h2>学生性别：{
       {sex}}</h2>
          <h2>学生年龄：{
       {age}}</h2>
      </div>
    </template>
    
    <script>
    export default {
        name: 'Student',
        
        // 声明 name、sex、age 由父组件传入
        // 不能再在data配置项中配置这几个参数
        props: ['name', 'sex', 'age']
    }
    </script>

在父组件中向子组件传值：

如果要向子组件传递一个数值类型的变量，可以使用`v-bind`的形式传值：

因为`v-bind`的内容是js表达式，`32`做为表达式表示数值32。

#### 二、传入参数类型验证 ####

可以在`props`配置项中，在子组件中指定接收的变量值的类型：

props: {
        
        name:String,
        sex:String,
        age:Number  // 指定age接收的是Number类型的变量
    }

此时，如果父组件向子组件传入了一个字符串类型的`age`，则会直接在浏览器控制台报错：

Invalid prop: type check failed for prop "age"

#### 三、限制参数必须 ####

在props配置项中，设置某些参数必须传入、某些参数的默认值：

export default {
        
        name: 'Student',
        props: {
        
            name: {
        
                type:String,  // 传入值的类型
                required: true  // 是否必需
            },
            age: {
        
                type:Number,
                default: 99  // 默认值
            },
            sex: {
        
                type:String
            }
        }
    }

如果父组件没有传入必须的参数，会在浏览器控制台报错

#### 四、修改接收到的父组件的值 ####

子组件中，要接收的参数不能配置到`data`中，否则会报错。

接收自父组件的值不能直接修改，否则可能会出问题。

但是，可以在`data`配置项中另外定义一个变量，将父组件传入的值赋值给新建的变量。(Vue会先接收父组件的值，然后才解析组件的`data`，所以在`data`配置项中可以接收到父组件的值)

<template>
      <div>
          <h2>学生姓名：{
       {name}}</h2>
          <h2>学生性别：{
       {sex}}</h2>
          <h2>学生年龄：{
       {myAge}}</h2>
          
          
          <button @click='myAge++'>点我更新年龄</button>
      </div>
    </template>
    
    <script>
    export default {
        name: 'Student',
        props: ['name', 'sex', 'age'],
    
        data() {
            return {
                myAge: this.age  // 将父组件传入的age赋值到组件中自定义的myAge上
            }
        },
    }
    </script>

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**