在父组件向子组件传值的时候，子组件会使用 props 来接收父组件传递来过的参数，这个参数我们是可以根据我们的需求，来进行校验和配置属性的。例如，必传、默认值等。

Prop 的大小写

HTML 中的属性名是大小写是不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

子组件接收参数的三种方式

第一种数组的方式：

export default {
  props: ['name', 'content']
}

第二种指定类型：

export default {
  props: {
    content: String // content要求是String，如果是其他类型则Vue会发出警告
  }
}

第三种更详细的对象方式：

export default {
  props: {
    content: {
      type: String,   // 指定类型
      required: true, // 是否传递
      default: ''     // 默认值
    }
  }
}

自定义验证参数

export default {
  props: {
    content: {
      type: String,
      required: true,
      default: '',
      validator: function (v) {  // 自定义验证，返回需是布尔值
        return v.length > 3
      }
    }
  }
}

参数类型

常用类型实例演示：

export default {
  props: {
    number: { // 数字
      type: Number,
      default: 0
    },
    string: { // 字符串
      type: String,
      default: ''
    },
    bool: { // 布尔
      type: Boolean,
      default: true
    },
    object: { // 对象
      type: Object,
      default: () => ({})
    },
    array: { // 数组
      type: Array,
      default: () => ([])
    }
  }
}

Vue 原生构造函数的类型：

• String // 字符串
• Number // 数字
• Boolean // 布尔
• Array // 数组
• Object // 对象
• Date // 日期
• Function // 函数
• Symbol // 属性

非 Prop 的属性

介绍

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。

例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件，这个插件需要在其 <input> 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上：

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

然后这个 data-date-picker="activated" attribute 就会自动添加到 <bootstrap-date-input> 的根元素上。

实例演示

父组件

<template>
  <div>
    <Demo6 name="lanyulei" content="test prop"></Demo6>
  </div>
</template>

<script>
import Demo6 from './components/Demo6'
export default {
  components: {
    Demo6
  }
}
</script>

子组件

<template>
  <div>
    <h1>{{ name }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

因为子组件中没有 prop 为 content 的这个属性，所以继承了父组件的特性，如下图，如果在子组件的 props 里接收content 则DOM中就不会有这个属性，如下图子组件没有 name 的属性。

禁止属性的继承

子组件设置 inheritAttrs 选项，则可以禁止继承父组件的数据，即使子组件没有接收父组件的属性，父组件传入的属性也不会出现在子组件dom的父元素上。

如下实例：

<template>
  <div>
    <h1>{{ name }}</h1>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

结果：