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>

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

<template><div id="app"><!-- 向子组件传值 --><Student name='王五' sex='男' age='32'/></div>
</template>

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

<template><div id="app"><!-- 使用 :age 向子组件传入数值类型的值 --><Student name='王五' sex='男' :age='32'/></div>
</template>

因为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><!-- 只能修改组件中自定义的myAge，不能直接修改传入的age --><button @click='myAge++'>点我更新年龄</button></div>
</template><script>
export default {name: 'Student',props: ['name', 'sex', 'age'],data() {return {myAge: this.age  // 将父组件传入的age赋值到组件中自定义的myAge上}},
}
</script>

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