vue组件的props属性

VUE组件的props属性


  • vue组件可以通过props属性来从父组件获取值
  • props属性可以有以下几种写法
    // 数组写法
    props: ['title', 'content', 'like']
    // 对象写法 - 1
    props: {
        title: String, // 指定title的类型,设置title只能是String类型的
        content: undefine, // undefine和null表示content可以是任何类型的
        like: [String, Number], // like可以是数组中的任意类型 
    }
    // 对象写法 - 2
    props: {
        title: {
            type: String, // type指定属性类型,用法同上
            default: 'title', // default指定默认值
        },
        content: {
            type: String,
            required: ture, // reuired声明属性是否是必须的,即父组件是否必须传值
        },
        like: {
            type: Number,
            validator: val => { // 自定义验证函数
                return val > 100
            },
        }
    }
    
  • 一般情况下,我们都是使用最后一种写法,即props中的每个属性都是一个对象,我们先称它们为prop对象
  • 每个prop对象都可以有如下属性
    • type
      • 该属性指明prop的类型,type的值可以是下列原生构造函数中的一个
        • [String, Boolean, Number, Array, Object, Date, Function, Symbol]
      • 也可以是null或者undefine,表示prop可以是任何类型的
      • 或者是一个自定义的构造函数,这会通过instanceof的方式来进行比较,来验证prop的值是否是通过new对应的构造函数创建的
        props: {
            user: { // user = new Persion()
                type: Persion
            }
        }
        
    • default
      • 该属性为prop设定一个默认值,父组件传的值将会覆盖该默认值
    • required
      • 该属性的值是一个布尔值,表明prop是否是必须的,即父组件是否必须传值
    • vaildator
      • 该属性的值是一个函数,有一个参数是prop当前的值,返回一个布尔值,使用方式如上
      • 当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告

      注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的

  • props中的属性是通过单向数据流的方式从父组件传到子组件的
  • 这意味着:
    • props中的属性只能通过父组件来更新
    • 子组件不能直接通过this.prop = xx的方式来更新props中的属性
    • 子组件要更新props中的属性,可以使用如下两种方式
    // 父组件
    <Children :msg.sync="msg" />
    // ...
    data() {
        return {
            msg: 'original'
        }
    }
    // 子组件
    props: {
        msg: {
            type: String,
        }
    }
    methods: {
        handleChange() { // 触发handleChange方法后改变msg
            this.$emit('update:msg', 'change')
        }
    }
    
     --- 子组件
     props: {
       value: {
         type: [Number, String],
       },
       changeMsg: {
         type: Function,
         default: () => { },
       }
     },
     data () {
       return {
         msg: this.value
       }
     },
     methods: {
       handleChangeMsg () {
         this.msg = 'change'
         this.$emit('input', this.msg)
       }
     }
    --- 父组件
    <template>
       {{ msg }}
    </template>
    
    <script>
    export default {
     name: 'Home',
     components: {
       Children
     },
     data () {
       return {
         msg: 'original',
       }
     }
    }
    
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

Void骑士

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值