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 ...
随机推荐
- Mac OS 10.10.3下Apache + mod_wsgi配置【一】
[一] 首先,MAC是自带Apache的,在/private/etc/apache2路径下,能够使用apachectl -v查看版本号.我的版本号例如以下: Server version: Apach ...
- Lint工具去除Android工程里不再需要的资源
摘要: 在项目开发过程中常常会不断改UI设计,于是在定稿要发布的前夕,发现有好多不再需要的资源文件存在,发布的包会把这些无用的资源都包含在里面,造成APK的下载包过大.可以通过Android SDK自 ...
- The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory的解决方法
An error occurred at line: [31] in the generated java file: [/data/tmisnt/work/Catalina/localhost/_/ ...
- [计算机联网故障]WIFI接入正常,但是上网不正常(两种情况)
今天同事拿来一个笔记本,说是连接WIFI都正常,但是就是无法上网.换了单位的wifi和他自己的手机共享wifi都是无法上网. 我首先检查了一下IP地址设置,看是否指定了IP.没有. 然后取消IPv6. ...
- poj1151==codevs 3044 矩形面积求并
Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 21511 Accepted: 8110 Descrip ...
- 【bzoj4443】[Scoi2015]小凸玩矩阵
第K大也就是第n-K+1小,所以就可以的二分答案了 (江哥讲过一道类似题) 二分答案找出比当前答案小的数的位置的坐标,判断一下是否可以选出满足不在同一行同一列的n-K+1个数,然后就可以跑匈牙利了,对 ...
- sql 2005 win7 64 数据引擎
有个箭头,下拉,选择服务器名(就是本机的名称),如果没有就选择浏览更多,看能搜索出不还没的话就手动输入localhost
- list集合去重复元素
//set集合去重,不打乱顺序 public static void main(String[] args){ List<String> list = new ArrayList<S ...
- 自定义的Notification
要创建一个自定义的Notification,可以使用RemoteViews.要定义自己的扩展消息,首先要初始化一个RemoteViews对象,然后将它传递给Notification contentVi ...
- Java 基础 —— 注解
注解(annotation)不是注释(comment): 注解,是一种元数据(metadata),可为我们在代码中添加信息提供了一种形式化的方法.注解在一定程度上实现了元数据和源代码文件的结合,而不是 ...