Props中default用法及踩坑记录

最新推荐文章于 2023-09-13 17:27:58 发布

原创最新推荐文章于 2023-09-13 17:27:58 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript #react.js

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

vue

42 篇文章

订阅专栏

文章详细介绍了Vue组件中props的两种语法——数组语法和对象语法，包括类型检查、默认值设定、自定义验证函数。特别指出，在设置props的默认值时，不能直接引用data中的变量，因为prop的验证发生在组件实例创建之前。解决方案是使用工厂函数返回默认的数组或对象。

props的语法

1、数组语法

props: ['size', 'myMessage'] //不限制数据类型

2、对象语法（注意事项已在注释中说明）

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true,
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100,//基本类型可直接写默认值
      //default: () => 100,  //箭头函数写法
    },
    // 具有默认值的数组写法
    propK: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return ["张三"];
      },
      //default: () => ([])  //箭头函数写法
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: "hello" };
      },
      //default: () => ({})  //不能直接返回{}，这是function类型的写法
    },
    //带有默认方法function
    propG: {
      type: Function,
      default: () => {}  //function类型的写法
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      },
    },
  },

踩坑记录

用data中的变量，为props赋默认值，尝试多种方法都失败。父组件未向子组件传参数arrList的情况下，一直获取不到default的值。

  props:{
        arrList:{
            type:Array,
            default:() => (this.demoArr)
        }},
    data(){
        return{
            demoArr:[
                {title:"This is 01 title",price:"100",img:require('@/assets/example-pic/examplePic01.png')},]}
</div>

原因：prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

简单的说就是在 props-default里面无法引用到 data的数据，所以修改的时候要把data数据复制到default处。同时也要注意用一个工厂函数去返回数组或者对象

props{
 arrList:{
            type:[Array,Object],
            default:() => ([
                {x=...,y=....}
                {.....}
            ])
      }
  }