简单一点, 把根组件作为父组件。
1.1.1. 父子之间不能正常共享数据的
1.1.2. 父组件把数据传递给子组件: 步骤
步骤:
1.1.2.1. 在父组件中,正常定义自己的数据。
1.1.2.2. 在父组件的模板中通过属性绑定把数据绑定到子组件上。
1.1.2.3. 在子组件中定义props属性。用来接收父组件传递的数据。
在props中定义的属性,是专门用来从父组件中去获取数据的,定义好了之,就可以像定义在data中的数据项一样,去正常的使用。
1.1.2.4. 在子组件模板中使用数据
1.1.2.5. 在子组件中的函数中使用数据
1.1. 父传子有一个核心 子组件中的props配置项
1.1.1. 父子传递,讲究”你情我愿”
根组件中:明确地给子组件传递数据
子组件中:要通过props明确声明,我要数据
1.1.2. Props
详细的格式:
每一个数据项,都可以加三个属性设置来修饰它。
Props:{
数据项名字:{
type:类型。指明从父组件中传递过来的数据必须是什么类型。它的取值是:Object,Array,String,Number,Boolean 都是构造器。不要写成字符串。
default://默认值。当父组件没有传数据时,就用这个值。
required:true/false 。是否必须一定要传递过来。
}
}
1.1.3. 常见的props格式:
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
propB: [String, Number],// 多种类型
propC: {
type: String,// 必传且是字符串
required: true
},
propD: {
type: Number,
default: 100 // 数字,有默认值
},
// 数组/对象的默认值应当由一个函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
}
}
1.1.4. 类型必须要一致
这里需要Number,如果不是Number就报错。
1.1.5. 默认值
上面的代码中,是给了值的。所以就会用给了的值。
1.1.6. Require:true 必传项
1.2. 你不能在子组件中修改父组件传递的数据
解决方法:
在子组件中,接收父组件传递的数据之后,你可以用这个数据对自已子组件中定义的数据项去做初始化,然后,你就可以去自己自己在子组件中定义的数据。