prop配置

2022-03-29  本文已影响0人  冰点雨

功能:让组件接收外部传过来的数据
(1)传递数据:

<Demo name="xxx"/>

(2)接收数据:
第一种方式(只接收)

props: ['name']

第二种方式(限制类型)

props:{
      name:String
 }

第三种方式(限制类型、限制必要性、指定默认值)

 props: {
        name: {
           type: String, //name 的类型是字符串
           required: true, //name 是必传的
           default: 99, //默认
        }
}

注意:props 是只读的,Vue 底层会监测你多 props 的修改,如果进行了修改,就会发出 j 警告。
若业务需求确实需要修改,那么请复制 props 的内容到 data 中一份,然后去修改 data 中的数据

传值 App.vue

  <Student name="李四" sex="女" :age="18" />

接收 Student.vue

export default {
  name: 'Student',
  data() {
    return {
      msg: '我是一个学生',
      myAge: this.age,
    }
  },
  props: ['name', 'sex', 'age'], //简单接收

  //接收的同时对数据进行类型限制
  /*  props:{
     name:String,
    age:Number,
    sex:String
  } */

  // 接收的同时对数据:进行类型限制+默认值的限制
  /* props: {
    name: {
      type: String, //name的类型是字符串
      required: true, //name是必传的
    },
    age: {
      type: Number,
      default: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  }, */
}
上一篇 下一篇

猜你喜欢

热点阅读