Vue-prop
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的更多相关文章
- vue prop不同数据类型(数组,对象..)设置默认值
vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array, Function, Object ...
- vue prop 传递数据
prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 一个组件默认可以拥有任意数量的 p ...
- vue prop单向数据流
Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会.这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解. 另外,每次父组件更新时,子组件的所有 pro ...
- Vue Prop属性(父to子)
通过Prop向子组件传递数据 第一步父组件中 <template> <div id="app"> <Users :users="users& ...
- vue+typescript基础练习
环境 win10 node -v 8.9.3 vue-cli 3.4 typescript 3.1.5 编辑器 vscode 目标 使用vuecli工具,建立一个项目,使用typescript.并实现 ...
- 原有vue项目接入typescript
原有vue项目接入typescript 为什么要接入typescript javascript由于自身的弱类型,使用起来非常灵活. 这也就为大型项目.多人协作开发埋下了很多隐患.如果是自己的私有业务倒 ...
- vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
@Prop 父子组件之间传值 Install: npm install --save vue-property-decorator Child: <template> <div&g ...
- Miniprofiler在swagger、vue、angular中的使用
本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...
- 使用vue与element组件
1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...
- vue + typescript 项目起手式
https://segmentfault.com/a/1190000011744210 2017-10-27 发布 vue + typescript 项目起手式 javascript vue.js t ...
随机推荐
- 抢占式内核与非抢占式内核中的自旋锁(spinlock)的差别
一.概括 (1)自旋锁适用于SMP系统,UP系统用spinlock是作死. (2)保护模式下禁止内核抢占的方法:1.运行终端服务例程时2.运行软中断和tasklet时3.设置本地CPU计数器preem ...
- 通讯编程入门--WEBSOCKET
C#通讯编程入门--WEBSOCKET WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System ...
- navicat软件设置连接mysql数据库
navicat软件设置连接mysql数据库 适用范围及演示使用工具 适用范围:mysql全部系列(含Linux和Windows系统下的mysql) 演示使用工具:Navicat 8.0 MySQL 演 ...
- Oculus Rift DK2 驱动安装教程
第一次安装oculus rift硬件驱动的教程: 1. 执行驱动的下载网址:https://developer.oculusvr.com/ 下载驱动首先须要拥有一个oculus的帐号.点击Regi ...
- JavaScript实现页面重载 - 535种方式
location = location ... and a 534 other ways to reload the page with JavaScript location = location ...
- initial ram filesystem
1 制作最简单的initramfs 1.1 创建init #include <stdio.h> int main() { printf ("\n"); printf ( ...
- presentModalViewController和dismissModalViewControllerAnimated的使用总结
在实际开发中,如果要弹出视图: 我们常用到presentModalViewController方法和dismissModalViewControllerAnimated方法. presentModal ...
- 配置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),希望以后版本可以修 ...
- Kconfig SourceCode GDB调试 *****
1.GDB&makefile scripts->Makefile编译FLAGS -g HOSTCC = gcc HOSTCXX = g++ HOSTCFLAGS := HOSTCXXF ...
- 【杂文】5亿大质数表(5e8)
[杂文]\(5\) 亿大质数表(\(5e8\)) 在写哈希,刷数论题时曾一度想要查质数,\(F**k\) 百度文库数据又少,翻页蛋疼,还不给复制,真的是服了. 于是在我闲的蛋疼的时候就搞了个质数表出来 ...