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

时间:2024-03-27 12:34:51

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

1.1.1. 父子之间不能正常共享数据的

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

 1.1.2. 父组件把数据传递给子组件: 步骤

步骤:

1.1.2.1. 在父组件中,正常定义自己的数据。

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

 1.1.2.2. 在父组件的模板中通过属性绑定把数据绑定到子组件上。

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

1.1.2.3. 在子组件中定义props属性。用来接收父组件传递的数据。

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

props中定义的属性,是专门用来从父组件中去获取数据的,定义好了之,就可以像定义在data中的数据项一样,去正常的使用。

1.1.2.4. 在子组件模板中使用数据

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

 1.1.2.5. 在子组件中的函数中使用数据

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

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

1.1. 父传子有一个核心 子组件中的props配置项

1.1.1. 父子传递,讲究”你情我愿”

 根组件中:明确地给子组件传递数据

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

子组件中:要通过props明确声明,我要数据

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

 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. 类型必须要一致

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

 这里需要Number,如果不是Number就报错。

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

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

 1.1.5. 默认值

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

上面的代码中,是给了值的。所以就会用给了的值。

 1.1.6. Require:true 必传项

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

 1.2. 你不能在子组件中修改父组件传递的数据

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

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

解决方法:

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

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