组件的props(props是对象)

功能：接收传递给组件的数据功能：

可以向组件传递任何类型的数据

Props是只读对象，只能读取属性值，不能修改对象

注意：如果在使用类组件时创建了构造函数，则必须将props传递给super()。否则，无法在构造函数中使用

使用Props props

Div id='test1'/div

Div id='测试2'/div

Div id='测试3'/div

！-介绍react内核库-

Scriptsrc='./js/react . development . js '/script

！引入-react-dom以支持react工作dom

Scriptsrc='./js/react-DOM . development . js '/script

！-引入babel将jsx转换为JS-

Scriptsrc='./js/babel.min.js'/script

Script type='text/babel '

//创建组件

class person extends react.com ponent {

Render() {

console . log(this)；

Const{name，age，sex}=this.props

Return(

Ul

Li名称：{name}/li

Li性别：{sex}/li

Li年龄：{age 1}/li

/ul

)。

}

}

//在页面上渲染组件

react DOM . render(person name=' Jerry ' age={ 19 } sex='男人'/，document.getelementbyid('))

react DOM . render(person name=' Tom ' age={ 18 } sex='女人'/，document . getelementbyid(')；

Const p={name: '老刘'，age:18，sex: '女人' }

//react DOM . render(person name={ p . name } age={ p . age } sex={ p . sex }/，document

Reactdom.render (person {.p}/，document.getelementbyid ('test3 '))

/脚本

Props限制

必须引入Prop-types.js。否则，将报告错误

Div id='test1'/div

Div id='测试2'/div

Div id='测试3'/div

！-介绍react内核库-

Scriptsrc='./js/react . development . js '/script

！引入-react-dom以支持react工作dom

Scriptsrc='./js/react-DOM . development . js '/script

！-引入babel将jsx转换为JS-

Scriptsrc='./js/babel.min.js'/script

！-引入prop-types，引入组件标签属性限制后，全局引入一个或多个对象prop types

Scriptsrc='./js/prop-types.js'/script

Script type='text/babel '

//创建组件

class person extends react.com ponent {

Render() {

console . log(this)；

Const{name，age，sex}=this.props

Return(

Ul

Li名称：{name}/li

Li性别：{sex}/li

Li年龄：{age 1}/li

/ul

)。

}

}

//约束规则

Person.propTypes={

//限制name内容为字符串，isRequired表示不能省略该内容

name 3360 prop types . string . is required，

将//sex限制为字符串

Sex: PropTypes.string，

将//age限制为数字

Age: PropTypes.number，

将//speak限制为函数

Speak: PropTypes.func

}

Person.defaultProps={

Sex:“男人”，//sex默认值为男人

Age:18，

Speak 3360 Function(){

return[1]；

}

}

//在页面上渲染组件

react DOM . render(person name=' Jerry ' age={ 19 }/，document.getelementbyid ('test1 '))

react DOM . render(person name=' Tom ' age={ 18 } sex='女人'/，document . getelementbyid(')；

Const p={name: '老刘'，age:18，sex: '女人' }

//react DOM . render(person name={ p . name } age={ p . age } sex={ p . sex }/，document

Reactdom.render (person {.p}/，document.getelementbyid ('test3 '))

/脚本

Vue限制props

您可以为组件的prop指定认证要求(例如，您知道的类型)。如果其中一个要求未满足，Vue将在浏览器控制台中发出警告。这在开发其他人可以使用的组件时特别有用。

要自定义Prop身份认证方法，可以在props的值中提供具有验证要求的对象，而不是字符串数组。例如：

Vue.component('my-component '，{

Props: {

//基本类型检查(“null”和“undefined”经过所有类型的验证)

Propa :号，

//各种可能的类型

propb 3360[String，Number]，

//必需字符串

PropC: {

Type:字串，

Required: true

}，

//带有默认值的数字

PropD: {

Type :号，

Default: 100

}，

//具有默认值的对象

PropE: {

Type:对象，

//对象或数组默认值必须来自工厂函数

default 3360 function(){

Return { message: ' hello ' }

}

}，

//用户定义的验证函数

PropF: {

Validator : function(值){

//此值必须与以下字符串之一匹配

return[‘success’、‘warning’、‘danger’]。index of(值)！==-1

}

}

}

})。

如果Prop验证失败(开发环境构建版本)，Vue将生成控制台的警报。

实例的property(例如data、computed等)不能在default或validator函数中使用，因为这些prop是在创建组件实例之前确认的。

类型检查类型可以是以下默认构造函数之一：

String

Number

Boolean

阿里

Object

Date

Function

符号

此外，type可以是自定义构造函数，并可以通过instanceof确认检查。例如，提供了以下默认构造函数：

Functionperson (firstname，lastname) {

This.firstName=firstName

This.lastName=lastName

}

您可以使用：

Vue.component('blog-post '，{

Props: {

Author: Person

}

})。

确认Author prop的值是通过new Person创建的。