Vue props用法详解

父子组件

比如我们需要创建两个组件 Test(父组件) 和 Cmpone(子组件)，现在我们要实现从Test组件向Cmpone组件传递数据。父组件向子组件传递数据分为两种方式：动态和静态

静态props

子组件要显示的用 props 声明它期望获得的数据

Test组件

<template><div class="Test"><cmpone forChildMsg="字符串随便写"></cmpone></div>
</template>
<script>
import Cmpone from './Cmpone'
export default {name: 'Test',components:{Cmpone,}
}
</script>
<style scoped>
</style>

Cmpone组件

<template><div class="cmpone"><div>{{forChildMsg}}</div></div></template>
<script>export default {name: 'Cmpone',components:{},props: ["forChildMsg"]}
</script>
<style scoped></style>

动态props

在模板中，要动态地绑定父组件的数据到子组件模板的 props，和绑定 Html 标签特性一样，使用v-bind绑定；
基于上述静态 props 的代码，这次只需要改动父组件

Test组件

<template><div class="Test"><cmpone :forChildMsg="forChildMsg"></cmpone></div>
</template>
<script>
import Cmpone from './Cmpone'
export default {name: 'Test',components:{Cmpone,},data(){return{forChildMsg:'父组件向子组件传递数据'}}
}
</script>
<style scoped>
</style>

Cmpone组件

<template><div class="cmpone"><div>{{forChildMsg}}</div></div></template>
<script>export default {name: 'Cmpone',components:{},props: ["forChildMsg"]}

props验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组

  props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)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}}}

props驼峰标识

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

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

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

<blog-post :post-title="message"></blog-post>