vue2父组件给子组件传值

一、沿用上次的案例

vue2脚手架组件开发

二、传值思路

要实现的是父组件向子组件传值，子组件本身并不存储数据
所以这里要把原有子组件的data数据注释，改为由父组件传递进来并展示
props是用于父组件向子组件传递数据信息

三、更改子组件User为接收父组件内容(与第四步一起使用，缺一不可

1. 在子组件中，使用props配置项，定义子组件能够被接受的值
2. 可以看到这里把name、sex、hobby、age四个属性值都定义了，也就是子组件允许父组件传递这四个属性的值
3. 其余属性传递给子组件一律不处理
4. 这里改写完毕后，需要父组件将数据传递过来才能使用，否则页面将报错

点击查看代码

<template>
  <div>
    <ul>
      <li>姓名：{{ name }}</li>
      <li>性别：{{ sex }}</li>
      <li>爱好：{{ hobby }}</li>
      <li>年龄: {{ age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // 1. 注释子组件User原有的定义data方式
  /* data() {
    return {
      name: "Anbin",
      sex: "男",
      hobby: "sleep",
      age: 18,
    }
  }, */

  //2. 改为定义接收父组件的值
  props: ["name", "sex", "hobby", "age"],
};
</script>

<style>
</style>

四、更改父组件App向子组件User传值(与第三步一起使用，缺一不可

可以看到由3改为了3.1
增加了父组件向子组件传递四个属性值的操作，以实现父组件向子组件的最终调用

点击查看代码

<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- 3. 在页面上使用子组件User -->
    <!-- <User></User> -->

    <!-- 3.1 在页面使用子组件的基础上，实现父组件向子组件传值，以让子组件数据正常使用 -->
    <User name='小明' age="18" hobby="睡觉" sex="男"></User>
  </div>
</template>

<script>
// 1. 引入子组件User.vue,并起名为User
import User from "./components/User.vue";

export default {
  name: "App",
  data() {
    return {
      title: "我是App组件",
    };
  },
  components: {
    // 2. 在父组件App中注册子组件User
    User,
  },
};
</script>

<style>
</style>

五、查看页面效果

可以看到，这样就实现了父组件向子组件传值

六、父组件向子组件传值的三种方式：

1. 最简单形式，是刚刚实现的，props配置项是数组；数组中写能被父组件接受的属性名，对应下图2

2. 进阶形式，增加数据类型限制，props配置项是对象；数据类型的首字母必须大写，例如字符串类型不能是string，必须是String，其他数据类型同理，对应下图2.1

3. 最终形式，增加默认值、增加是否为必填项，对应下图2.2

4. props能传递多种数据类型，不仅局限于字符串、数值
   可传递的数据类型汇总：Prop类型
   默认值配置项(可选配置：defalut
   是否必填配置项(可选配置：required

5. 此处2.3对age属性，以数组形式定义了多种类型的限制，允许接收父组件传递字符串类型和数值类型的age值

6. 以此处2.3的age属性为例，假如子组件age定义只允许接收Number类型的数值，而父组件App.vue中写法不规范
   虽然数据可以展示在页面上，但这并不符合官方规范，控制台会报错传递的prop类型不规范：Invalid prop: type check failed for prop "age". Expected Number with value 18, got String with value "18"

7. 以第6点来说，实现以下写法举例：
   <User name='小明' age=18 hobby="睡觉" sex="男"></User>
   错误
   因为age要求传递数值，但传递了字符串类型的18；即使18没有被引号包裹，vue也默认当成字符串类型的18进行传递

   <User name='小明' v-bind:age="18" hobby="睡觉" sex="男"></User>
   正确
   使用了v-bind表达式来实现一个结果值，虽然有双引号，但v-bind表达式返回一个结果值，所以会被当成Number类型进行传递

   <User name='小明' :age="18" hobby="睡觉" sex="男"></User>
   正确
   最终形式，只是对v-bind进行了简写，由v-bind更改为 :

点击查看代码

<template>
  <div>
    <ul>
      <li>姓名：{{ name }}</li>
      <li>性别：{{ sex }}</li>
      <li>爱好：{{ hobby }}</li>
      <li>年龄: {{ age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // 1. 注释子组件User原有的定义data方式
  /* data() {
    return {
      name: "Anbin",
      sex: "男",
      hobby: "sleep",
      age: 18,
    }
  }, */

  //2. 改为定义接收父组件的值
  //props: ["name", "sex", "hobby", "age"],

  //2.1  在定义接收父组件的值基础上，增加属性要求的数据类型
  /* props: {
    name: String, //要求传递的name属性值必须是 字符串类型
    sex: String, //要求传递的sex属性值必须是 字符串类型
    hobby: String, //要求传递的hobby属性值必须是 字符串类型
    age: Number, //要求传递的age属性值必须是  数字类型
  }, */

  //2.2  在定义接收父组件的值基础上，增加属性要求的数据类型、默认值、是否必填
  props: {
    name: {
      type: String, //要求name属性值必须是字符串类型
      defalut: "Anbin", //默认name属性值是Anbin
      required: true, //要求父组件使用本组件，必须传递name属性值
    },
    sex: {
      type: String, //要求sex属性值必须是字符串类型
      required: true, //要求父组件使用本组件，必须传递sex属性值
      //sex属性没有默认值
    },
    hobby: {
      type: String, //要求hobby属性值必须是字符串类型
      defalut: "吃饭", //默认hobby属性值是吃饭
      // hobby不是必须传递的
    },
    age: {
      // type: Number, //要求age属性值必须是数值类型
      type: [Number, String], //age属性值可以是数值和字符串类型
      defalut: 19, //默认defalut属性值是吃饭
      required: true, //要求父组件使用本组件，必须传递age属性值
    },
  },
};
</script>

<style>
</style>