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

 Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

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

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

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

props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}

传递静态或动态 Prop

<!--像这样,你已经知道了可以像这样给 prop 传入一个静态的值:-->
<blog-post title="My journey with Vue"></blog-post>
你也知道 prop 可以通过 v-bind 动态赋值,例如:
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post> <!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

传入一个对象

<!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post> <!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

如果你想要将一个对象的所有属性都作为 prop 传入,你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如,对于一个给定的对象 post

post: {
id: 1,
title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

//等价于:
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>

非 Prop 的特性

一个非 prop 特性是指传向一个组件,但是该组件并没有相应 prop 定义的特性。

因为显式定义的 prop 适用于向一个子组件传入信息,然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上。

例如,想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件,这个插件需要在其 <input> 上用到一个 data-date-picker 特性。我们可以将这个特性添加到你的组件实例上:

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

然后这个 data-date-picker="activated" 特性就会自动添加到 <bootstrap-date-input> 的根元素上。

Vue-prop的更多相关文章

  1. vue prop不同数据类型(数组,对象..)设置默认值

    vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array,  Function, Object   ...

  2. vue prop 传递数据

    prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 一个组件默认可以拥有任意数量的 p ...

  3. vue prop单向数据流

    Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会.这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解. 另外,每次父组件更新时,子组件的所有 pro ...

  4. Vue Prop属性(父to子)

    通过Prop向子组件传递数据 第一步父组件中 <template> <div id="app"> <Users :users="users& ...

  5. vue+typescript基础练习

    环境 win10 node -v 8.9.3 vue-cli 3.4 typescript 3.1.5 编辑器 vscode 目标 使用vuecli工具,建立一个项目,使用typescript.并实现 ...

  6. 原有vue项目接入typescript

    原有vue项目接入typescript 为什么要接入typescript javascript由于自身的弱类型,使用起来非常灵活. 这也就为大型项目.多人协作开发埋下了很多隐患.如果是自己的私有业务倒 ...

  7. vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明

    @Prop  父子组件之间传值 Install: npm install --save vue-property-decorator Child: <template> <div&g ...

  8. Miniprofiler在swagger、vue、angular中的使用

     本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...

  9. 使用vue与element组件

    1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...

  10. vue + typescript 项目起手式

    https://segmentfault.com/a/1190000011744210 2017-10-27 发布 vue + typescript 项目起手式 javascript vue.js t ...

随机推荐

  1. 抢占式内核与非抢占式内核中的自旋锁(spinlock)的差别

    一.概括 (1)自旋锁适用于SMP系统,UP系统用spinlock是作死. (2)保护模式下禁止内核抢占的方法:1.运行终端服务例程时2.运行软中断和tasklet时3.设置本地CPU计数器preem ...

  2. 通讯编程入门--WEBSOCKET

    C#通讯编程入门--WEBSOCKET WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System ...

  3. navicat软件设置连接mysql数据库

    navicat软件设置连接mysql数据库 适用范围及演示使用工具 适用范围:mysql全部系列(含Linux和Windows系统下的mysql) 演示使用工具:Navicat 8.0 MySQL 演 ...

  4. Oculus Rift DK2 驱动安装教程

    第一次安装oculus rift硬件驱动的教程: 1.   执行驱动的下载网址:https://developer.oculusvr.com/ 下载驱动首先须要拥有一个oculus的帐号.点击Regi ...

  5. JavaScript实现页面重载 - 535种方式

    location = location ... and a 534 other ways to reload the page with JavaScript location = location ...

  6. initial ram filesystem

    1 制作最简单的initramfs 1.1 创建init #include <stdio.h> int main() { printf ("\n"); printf ( ...

  7. presentModalViewController和dismissModalViewControllerAnimated的使用总结

    在实际开发中,如果要弹出视图: 我们常用到presentModalViewController方法和dismissModalViewControllerAnimated方法. presentModal ...

  8. 配置Cocos Code IDE 可以正常运行的组合:jdk,sdk ,ndk, ant, cocos2d-x

    Cocos Code IDE:Cocos Code IDE 1.0.0-RC2 jdk:Cocos Code IDE 自动的jdk sdk:8以上 ndk:r9d(r10有bug),希望以后版本可以修 ...

  9. Kconfig SourceCode GDB调试 *****

    1.GDB&makefile scripts->Makefile编译FLAGS  -g HOSTCC = gcc HOSTCXX = g++ HOSTCFLAGS := HOSTCXXF ...

  10. 【杂文】5亿大质数表(5e8)

    [杂文]\(5\) 亿大质数表(\(5e8\)) 在写哈希,刷数论题时曾一度想要查质数,\(F**k\) 百度文库数据又少,翻页蛋疼,还不给复制,真的是服了. 于是在我闲的蛋疼的时候就搞了个质数表出来 ...