vue进阶内容总结--Prop (二)

Prop

Prop的大小写（camelCase vs kebab-case）

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

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

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-tittle="hello!"></blog-post>

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

 

Prop类型

到这里，我们只看到了以字符串数组形式列出的 prop：

props:['tittle','likes','other']

但是，通常我们都希望每个 prop 都有一个指定的值类型。这时，我们可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

prop:{
    tittle:string,
    likes:Number,
    isPublished:Boolean,
    commentIds:Array,
}

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。我们会在这个页面接下来的部分看到 类型检查和其他 prop 验证。

传递静态或动态 Prop

像如下这样，我们已经知道这样给 prop 传入一个静态的值：

<blog-post tittle="My journey with Vue"></blog-post>

我们都知道 prop 可以通过 v-bind 动态赋值，例如：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:tittle="post.tittle"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post 
v-bind:tittle="post.tittle + ' By ' post.author.name"></blog-post>

在上面的例子中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 Prop。

 

传入一个数字

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉