这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
本文实例讲述了Vue Prop属性功能与用法。分享给大家供大家参考,具体如下:
1 Prop 的大小写 (camelCase vs kebab-case)
HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
html:
<div id="app-1">
<!-- HTML 中是 kebab-case -->
<blog-post post-title="你好!"></blog-post>
</div>
js:
//Prop 的大小写 (camelCase vs kebab-case)
Vue.component('blog-post', {
//在 js 中是 camelCase
props: ['postTitle'],
template: '<h3>{
{ postTitle }}</h3>'
});
new Vue({
el: '#app-1'
})
重申一次,如果你使用字符串模板,那么这个限制就不存在了。
2 Prop 类型
到这里,我们只看到了以字符串数组形式列出的 prop:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力
这不仅为你的组件提供了文档,还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。你会在这个页面接下来的部分看到类型检查和其它 prop 验证。
3 传递静态或动态 Prop
像这样,你已经知道了可以像这样给 prop 传入一个静态的值:
<blog-post title="开花啦"></blog-post>
你也知道 prop 可以通过 v-bind 动态赋值,例如