vue组件之间数据的传递 - 父传子详解

简单一点， 把根组件作为父组件。

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. 你不能在子组件中修改父组件传递的数据

 

  

解决方法：

在子组件中，接收父组件传递的数据之后，你可以用这个数据对自已子组件中定义的数据项去做初始化，然后，你就可以去自己自己在子组件中定义的数据。