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

最新推荐文章于 2025-06-12 11:26:36 发布

弱氵弎仟

最新推荐文章于 2025-06-12 11:26:36 发布

阅读量566

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_41949511/article/details/82865974

vue 专栏收录该内容

9 篇文章

订阅专栏

本文围绕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,
  // ...
})