云趣在线企业网站建设,wordpress主开发,马铃薯交易网站建设方案,wordpress编辑权限设置密码Prop大小写 Prop的命名规则有camelCase#xff0c;驼峰命名和kebab-case#xff0c;短横线分隔。 由于HTML对大小写不敏感#xff0c;所以浏览器会把大写字母解释为小写字母。 当我们使用camelCase命名prop时#xff0c;在Dom中的template模板使用该prop就需要换成对应的…Prop大小写 Prop的命名规则有camelCase驼峰命名和kebab-case短横线分隔。 由于HTML对大小写不敏感所以浏览器会把大写字母解释为小写字母。 当我们使用camelCase命名prop时在Dom中的template模板使用该prop就需要换成对应的kebab-case命名形式。 如果在字符串模板中使用该限制就不存在。 div idapp!-- kebab-case in HTML --blog-post post-titlehello1/blog-postprofile/profile /div scriptVue.component(blog-post, {// camelCase in JavaScriptprops: [postTitle],template: h3{{ postTitle }}/h3});Vue.component(profile,{template:blog-post postTitlehello2/blog-post});new Vue({el: #app}); /scriptProp类型 props可以简单地写为一个数组但也可以使用对象的形式为每个prop指定其类型 props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor }传递静态或动态的Prop 静态传递prop blog-post titleMy journey with Vue/blog-post使用v-bind动态传递prop !-- Dynamically assign the value of a variable -- blog-post v-bind:titlepost.title/blog-post!-- Dynamically assign the value of a complex expression -- blog-postv-bind:titlepost.title by post.author.name /blog-post上述示例的post.title是字符串类型但是我们也可以传递任何类型。 如果我们使用比如Number、Boolean、Array、Object等类型的原始值作为prop怎么避免它们被当成字符串传递呢使用v-bind即可。 特殊的如果我们想要传递一个对象的所有prop而非对象本身可以使用不带参数的v-bind blog-post v-bindpost/blog-post等价于 blog-postv-bind:idpost.idv-bind:titlepost.title /blog-post单向数据流 数据通过prop的传递是单向的只能从父组件传递到子组件而无法反向传递。如果没有这种限制那么我们就很难掌控数据流的流向。 父组件prop的更新也会刷新传递给子组件的prop。 一旦我们尝试修改父组件传递给子组件的propVue会在浏览器控制台发出警告。 子组件中有两种常见的需要修改传递来的prop的情况 用来初始化本地的prop props: [initialCounter], data: function () {return {counter: this.initialCounter} }需要修改传递来的prop props: [size], computed: {normalizedSize: function () {return this.size.trim().toLowerCase()} }要小心使用传递来的Object或Array类型的prop因为会不小心修改了原数据。我们可以进行深拷贝来避免这种情况。 Prop验证 基础的类型检查 null和undefined会通过任何类型验证。 props:{propA: Number }多个可能的类型 props:{propB: [String, Number], }必填项 props:{propc:{type: String,required: true} }默认值 props:{propD: {type: Number,default: 100}, propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: hello }}}, }自定义验证函数 props: {propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return [success, warning, danger].includes(value)}} }prop会在组件实例创建前进行验证开发环境构建版本的Vue验证prop失败会给出浏览器控制台警告。 类型检查 type的值可以是以下原生构造函数之一 StringNumberBooleanArrayObjectDateFunctionSymbol type也可以使用自定义的构造函数 function Person (firstName, lastName) {this.firstName firstNamethis.lastName lastName } Vue.component(blog-post, {props: {author: Person} })Non-Prop Attributes non-prop attributes是指传递给了一个组件但是该组件中没有相关定义的prop现在叫做attributes。 一些第三方组件的设计者只会定义那些组件所必需的、常见的的prop而其他需要额外的prop的场景就会使用non-prop attribute这些额外的attribute会被添加到组件的root element。 替换/合并已有的Attributes 通常传递给子组件的attributes会替换其已经设置好了的值但是class和style attributes将会被合并处理。 禁用Attributes继承 我们可以设置inheritAttrs: false来阻止组件的根元素继承attributes。 Vue.component(my-component, {inheritAttrs: false,// ... })接下来可以使用$attrs来获取传递给组件的所有attribute除了class和style。 Vue.component(base-input, {inheritAttrs: false,props: [label, value],template: label{{ label }}inputv-bind$attrsv-bind:valuevaluev-on:input$emit(input, $event.target.value)/label })base-inputlabelUsername:v-modelusernamerequiredplaceholderEnter your username /base-input上面示例的placeholder作为non-prop attribute传递但是我们禁用了组件根元素继承attributes然后通过v-bind$attrs将class和style以外的attributes传递给了base-input。 参考资料 Props-Vue 2vm.$attrs