本页假定您已阅读组件基础知识。如果您对组件还不是很了解，我建议您先阅读它。Propcase(camelCasevskebab-case)")HTML中的属性名称不区分大小写，因此浏览器会将所有大写字符解释为小写字符。这意味着当您在DOM中使用模板时，camelCase(camelcase命名法）需要用等价的kebab-case命名（破折号分隔命名）：Vue.component('blog-post',{//JavaScript中的驼峰命名法props:['postTitle'],template:'
{{postTitle}}
'})
同样，如果你'reusingstringtemplates,thenthislimitationdoesn'texist.Proptypes到目前为止，我们只看到props被列为字符串数组：props:['title','likes','isPublished','commentIds','author']但是，通常你希望每个prop都有一个指定的值类型，这时候你可以把props以对象的形式列出来，这些属性的名称和值分别是名称和类型道具：道具：{标题：字符串，likes:Number,isPublished:Boolean,commentIds:Array,author:Object,callback:Function,contactsPromise:Promise//oranyotherconstructor}这不仅为你的Components提供了文档而且还在浏览器的JavaScript控制台提示用户时他们遇到了错误的类型。您将在本页的其余部分看到类型检查和其他道具验证。传递静态或动态Prop就像这样，你已经知道你可以像这样传递一个静态值给prop：你也知道prop可以传递v-bind动态赋值，例如：在上面两个例子中，我们通过值都是字符串类型，但实际上_any_类型的值都可以传递给prop。传入一个数字传入一个布尔值传入一个数组传入一个对象传入一个对象的所有属性如果你想传入一个对象的所有属性作为props，可以使用v-不带参数的绑定（而不是v-bind:prop-name）。例如，对于给定的对象post:post:{id:1,title:'MyJourneywithVue'}下面的模板：等同于In:单向数据流所有的props使父子props形成一个单向向下绑定：父props的更新向下流向子组件，但反之则不然。这可以防止子组件意外更改父组件的状态，这会使您的应用程序的数据流难以理解。此外，每次父组件发生变化时，子组件中的所有props都会刷新为最新值。这意味着您不应该更改子组件内的道具。如果这样做，Vue将在浏览器的控制台中发出警告。尝试更改prop有两种常见情况：prop用于传递初始值；然后子组件想将其用作本地道具数据。在这种情况下，最好定义一个本地数据属性并将此prop作为其初始值：props:['initialCounter'],data:function(){return{counter:this.initialCounter}}Thisprop以A开头原始值传入，需要转换。在这种情况下，最好用这个prop的值定义一个计算属性：props:['size'],computed:{normalizedSize:function(){returnthis.size.trim().toLowerCase()}}注意在JavaScript中对象和数组是通过引用传入的，所以对于数组或对象类型的prop，在子组件中改变对象或数组本身会影响父组件的状态。Propvalidation我们可以指定组件props的验证要求，比如你知道的这些类型。如果不满足要求，Vue将在浏览器控制台中警告您。这在开发将被其他人使用的组件时特别有用。要自定义props的验证方式，您可以使用具有验证要求的对象而不是字符串数组来提供props值。示例：Vue.component('my-component',{props:{//基本类型检查（`null`和`undefined`将通过任何类型验证）propA:Number,//多种可能的类型propB:[String,Number],//需要字符串propC:{type:String,required:true},//numberwithdefaultvaluepropD:{type:Number,default:100},//withdefaultvalueobjectpropE:{type:Object,//对象或数组默认值必须从工厂函数中获取匹配以下字符串之一return['success','warning','danger'].indexOf(value)!==-1}}}})当prop验证失败时，Vue（开发版本）将生成一个控制台警告。请注意，这些props在创建组件实例之前进行验证，因此实例属性（例如数据、计算等）在默认或验证器函数中不可用。类型检查type可以是以下原生构造函数之一：StringNumberBooleanArrayObjectDateFunctionSymbol另外type也可以是自定义构造函数，可以通过instanceof进行检查确认。例如，给定以下现成的构造函数：functionPerson(firstName,lastName){this.firstName=firstNamethis.lastName=lastName}你可以使用：Vue.component('blog-post',{props:{author:Person}})来验证authorprop的值是由新的Person创建的。Non-PropAttribute一个非prop属性被传递给一个组件，但是该组件没有相应prop定义的属性。因为显式定义的props对于向子组件传递信息很有用，组件库的作者不能总是预见到组件将被使用的场景。这就是为什么组件可以接受任意属性，并且这些属性将被添加到该组件的根元素中。例如，假设您正在通过Bootstrap插件使用第三方组件，该插件需要其上的data-date-picker属性。我们可以将这个属性添加到你的组件实例中：添加到的根元素。替换/合并现有属性想象一个像这样的模板：为了为我们的日期选择器插件定制一个主题，我们可能需要添加一个特殊的类名，如下所示：定义两个不同的类值：form-control，在组件的模板中设置date-picker-theme-dark，大多数属性都是从组件的父级传入的，也就是提供给组件的值从外部将替换组件内部设置的值。所以传入type="text"将替换type="date"并打破它！好在class和style属性会聪明一点，就是把两边的值合并起来得到最终的值：form-controldate-picker-theme-dark。DisableAttributeinheritance如果不想让组件的根元素继承属性，可以在组件的options中设置inheritAttrs:false。例如：Vue.component('my-component',{inheritAttrs:false,//...})这特别适合与实例的$attrs属性一起使用，它包含传递给的属性名称和属性值一个组件，例如：{required:true,placeholder:'Enteryourusername'}使用inheritAttrs:false和$attrs，您可以手动决定将这些属性分配给哪个元素。写基础组件时经常用到：Vue.component('base-input',{inheritAttrs:false,props:['label','value'],template:``})注意inheritAttrs:false选项不会影响样式和类绑定。此模式允许您更像原始HTML元素一样使用基础组件，而不必担心哪个元素是真正的根元素：
