抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

浅析Vue的Prop类型

Luna
编程前端Vue

发布于：May 16, 2021
次浏览

  Prop是Vue的组件用来进行通讯的一个attribute，被用来向子组件传递数据。HTML中的attribute名是不区分大小写的，因此使用DOM模板时，用驼峰命名法的prop名需要使用等价的短横线分割命名法来命名。但是如果使用的是字符串模板，这个限制就不存在了。

  Prop的定义方式可以是

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

  也可以是

1
2
3
4
5
6
7
8
9
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

  其中第二种方式给每个prop都指定了值的类型。

  也可以在定义prop的时候给它一个默认值，其方法是

1
2
3
4
5
6
props: {
      a: {
        type: Boolean,
        default: true
      }
    }

  在同一个组件中，data定义的变量和prop定义的变量不能同名，否则会报错。如果这个变量要用来在组件之间通信，那么就不要定义成data，应该定义成prop。

更新于：Jun 17, 2021

Vue

评论