VUE 父子组件传值

最新推荐文章于 2024-08-02 09:29:40 发布

小猪猪123333

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量135

点赞数

分类专栏： VUE实践

本文链接：https://blog.csdn.net/u012536222/article/details/101638311

版权

VUE实践专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文深入探讨Vue.js中父组件向子组件传递属性的方法，包括如何定义和使用自定义属性，设置类型检查，必填项，以及默认值。通过实例讲解了不同数据类型如Number、String、Object等的正确传递方式。

摘要由CSDN通过智能技术生成

父向子 v-bind props

<div :msg="msg"></div>

子组件接收

fooA 自定义名称 Number 接收的类型 required 设置为必填项 default默认值

props: {
    // fooA只接受数值类型的参数
    fooA: Number,
    // fooB可以接受字符串和数值类型的参数
    fooB: [String, Number],
    // fooC可以接受字符串类型的参数，并且这个参数必须传入
    msg: {
      type: String,
      required: true
    },
    // fooD接受数值类型的参数，如果不传入的话默认就是100
    fooD: {
      type: Number,
      default: 100
    },
    // fooE接受对象类型的参数
    fooE: {
      type: Object,
      // 当为对象类型设置默认值时必须使用函数返回
      default: function() {
        return { message: "Hello, world" };
      }
    },
    // fooF使用一个自定义的验证器
    fooF: {
      validator: function(value) {
        return value >= 0 && value <= 100;
      }
    },
　　fooG: {
      type:Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return [];
      }
    },
}