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>

image

四、更改父组件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>


image

五、查看页面效果

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

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

  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>

image

posted @ 2023-12-14 16:54  Anbin啊  阅读(1279)  评论(0)    收藏  举报