大家好,欢迎来到IT知识分享网。
首先为什么要引入prop这个东西,因为如果要向组件里面传递信息,在没有prop之前,是无法传递值到组件里面,因此引入了prop进行传递值。
1,Prop的大小写
官方文档,HTML对于attribute(属性)名的大小写是不敏感的,浏览器会把所有的大写字母,都解释为小写字母,因此使用DOM模板(就是原先写在html中,一打开就会被浏览器解析的代码)时,camelCase(驼峰命名法)的prop名需要使用等价的kebab-case( xx- xxx )命名:
Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'}) <!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post>
2,Prop类型
可以在定义prop时,指定值类型,如代码:
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
3,传递静态或者动态的Prop
传入静态值:
<blog-posttitle="My journey with Vue"></blog-post>
传入动态值:
<!-- 动态赋予一个变量的值 --> <blog-postv-bind:title="post.title"> </blog-post> <!-- 动态赋予一个复杂表达式的值 --> <blog-postv-bind:title="post.title + ' by ' + post.author.name"></blog-post>
传入数字
<!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-postv-bind:likes="42"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-postv-bind:likes="post.likes"></blog-post> 传入布尔值 <!-- 包含该 prop 没有值的情况在内,都意味着 `true`。--> <blog-postis-published></blog-post> <!-- 即便 `false` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-postv-bind:is-published="false"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-postv-bind:is-published="post.isPublished"></blog-post>
传入数组
<!-- 即便数组是静态的,我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-postv-bind:comment-ids="[234, 266, 273]"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-postv-bind:comment-ids="post.commentIds"></blog-post>
传入一个对象
<!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-postv-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"> </blog-post> <!-- 用一个变量进行动态赋值。--> <blog-postv-bind:author="post.author"></blog-post>
传入一个对象中的所有property
一个对象post
post: { id: 1, title: 'My Journey with Vue'}
下面的模板:
<blog-postv-bind="post"></blog-post>
等价于:
<blog-postv-bind:id="post.id"v-bind:title="post.title"></blog-post>
4,单向数据流
所有的prop使得其父子prop之间形成了单向下行绑定,父级prop的更新会向下流动到子组件中,但是反过来是不行的。
在JavaScript中对象和数组是通过引用传入的,对于一个数组或者对象类型的prop来说,子组件中改变变更这个对象或者数组本身将会影响到父组件的状态。
5,Prop验证
为了实现验证prop,可以为prop中的值提供一个带有验证需求的对象。
Vue.component('my-component', { 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 } } } })
当prop验证失败的时候,vue会产生一个控制台警告。
类型检查时,type可以是原生构造函数的其中一个,比如
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
也可以是自定义的构造函数
functionPerson(firstName, lastName) { this.firstName = firstName this.lastName = lastName }
你可以使用:
Vue.component('blog-post', { props: { author: Person } })
6,非Prop的Attribute
一个非prop的attribute是指传向一个组件,但该组件并没有想要的prop定义的attribute。
显示定义的prop适用于向一个子组件传入信息,然后组件库的作者并不总能预见组件会被用于怎样的场景。这也是组件为什么可以接受任意的attribute,而这些attribute会被添加到这个组件的根元素上。
例如,想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件,这个插件需要在其 <input> 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上:
<bootstrap-date-inputdata-date-picker="activated"></bootstrap-date-input>
然后这个 data-date-picker=”activated” attribute 就会自动添加到 <bootstrap-date-input> 的根元素上。
替换/合并已有的attribute
如何组件中的class不同,会被合并起来,style也是如此。
想象一下 <bootstrap-date-input> 的模板是这样的:
<inputtype="date"class="form-control">
为了给我们的日期选择器插件定制一个主题,我们可能需要像这样添加一个特别的类名:
<bootstrap-date-inputdata-date-picker="activated"class="date-picker-theme-dark"> </bootstrap-date-input>
庆幸的是,class 和 style attribute 会稍微智能一些,即两边的值会被合并起来,从而得到最终的值:form-control date-picker-theme-dark。
禁用attribute继承
如果你不希望组件的根元素继承 attribute,你可以在组件的选项中设置 inheritAttrs: false。例如:
Vue.component('my-component', { inheritAttrs: false, // ...})
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/165849.html