vue学习之路-组件(高级篇)-prop

本文围绕Vue的prop展开,介绍了prop大小写规则,在DOM中驼峰命名需用短横线分隔,字符串模板无此限制;还阐述了prop类型、单向数据流特点及处理方式,以及prop验证方法和禁用特性继承的设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.prop的大小写

HTML中的特姓名是不敏感的,所以浏览器会把所有大写字符解释为小写字符,所以在DOM中,驼峰命名法的prop名需要用等价的短横线分隔命名。  如果是使用字符串模板,这个限制就不存在。

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

2.prop类型

通常使用的是以字符串数组形式列出的prop

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

也可以用对象的形式列出prop,属性的名和值分别是prop各自的名称和类型。

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

3.单向数据流

父级的prop的更新会向下流动到子组件中,反之不行。如果在子组件中改变prop,vue会发出警告。

有两种常见情况需要注意:

a prop传递的数据,希望将其作为本地的prop数据使用。这种情况下,最好定义一个本地data属性,将prop作为它的初始值。

b 这个prop以一种原始值传入并且需要转换等操作。这种情况下,最好使用这个prop的值定义一个计算属性。

4.prop验证

为组件的 prop 指定验证要求,可以为props中的值提供一个带有验证需求的对象,而不是一个字符串数组。

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

5.禁用特性继承

inheritAttrs: false,

可以在组件的选项中设置。例如:

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值