1 props传值:
所有的prop都使得其父子组件之间形成了一个单行下行的数据流,父级prop的更新会向下流动到子组件中,但是反过来则不行。这样会防止子组件意外变更父组件的状态,从而导致你的应用数据难以理解。
1.1 父组件向子组件传值:
- ① 先在挂载成功的子组件中,添加props内容
props:{ 'named':String, 'blibli':{ type:String, default:"Bworld" // 当父组件没有给子组件传递该参数时,默认值为default } }
将props里的变量绑定到当前子组件的所需位置 。 - ②父组件中,在挂载子组件时将父组件中的数据传入。形式如:形参=‘实参’或形参=‘实参’,前者是动态传参,后者我所挂载的组件名为"v-hello",父组件在子组件挂载时传入了data中的变量为“tittle”,形式如下
<v-hello :named="title"></v-hello>
。
通过上述的两个步骤就可以完成父组件向子组件传值。
注:我在理解的时候觉得对父组件而言,子组件中定义的props内容就是形参,这样想会好理解 一些。
1.2 在prop中添加参数约束:
简单写法:
-
props:["name","age"]
带约束和默认值:
-
在父组件没有给子组件传值的时候,会使用默认值
props:{
name:{
type:String,
default:"法外狂徒张三"
},
age:{
type:int
}
}
带自检验函数:
props:{
propone: