浅谈Vuejs Prop基本用法


Posted in Javascript onAugust 17, 2017

这两天学习了Vuejs Prop感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

一、使用Prop传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。

prop是父组件用来传递数据的一个自定义属性。子组件需要显示的地用props选项声明”prop”

Vue.component('child',{
  props:['message'],
  template:'<span>{{ message }}</span>'
})

然后向它传入一个普通字符串:

<child message="hello!"></child>

结果:

hello!

二、camelCase vs.kebab-case

html不区分大小写。当使用非字符串模板时,prop的名字形式会从camelCase转为kebab-case(短横线隔开):

//camelCase
Vue.component('child',{
  props:['myMessage'],
  template:'<span>{{ message }}</span>'
})
//kebab-case
<child my-message="hello!"></child>

再次说明,如果你是用字符串模板,不用在意这些限制。

三、动态Prop

类似于用v-bind绑定HTML特性到一个表达式,也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件。

<div>
  <input v-model="parrentMsg">
  <br>
  <child v-bind:my-message="parrentMsg"></child>
</div>

使用v-bind的缩写语法通常更简单:

<child :my-message="parrentMsg"></child>

四、字面量语法vs动态语法

因为它是一个字面prop ,它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字,需要使用 v-bind ,从而让它的值被当作 javascript 表达式计算:

五、单项数据流

prop是单项绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。同时,这也很好理解,父组件是子组件的高度抽象,表示子组件的共有部分,一个组件的数据改变并不会改变其抽象,然而其抽象的改变却代表着所有子组件的改变。

另外,每次组渐渐更新时,子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了,Vue会在控制台给出警告。

通常有两种改变prop的情况:

1.prop作为初始值传入,子组件之后只是将它的初始值作为本地数据的初始值使用;

2.prop作为需要被转变的原始值传入。

更确切地说这两种情况是:
a.定义一个局部data属性,并将prop的初始值作为局部数据的初始值。

“` 
props: [‘initialCounter'], 
data: function () { 
return { counter: this.initialCounter} 
}

b.定义一个 computed 属性,此属性从 prop 的值计算得出。

```
  props: ['size'],
  computed: {
    normalizedSize: function () {
     return this.size.trim().toLowerCase()
   }
  }

六、Prop验证

组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告。当组件给其他人使用时这很有用。
prop 是一个对象而不是字符串数组时,它包含验证要求:

Vue.component('example', {
 props: {
  // 基础类型检测 (`null` 意思是任何类型都可以)
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是字符串
  propC: {
   type: String,
   required: true
  },
  // 数字,有默认值
  propD: {
   type: Number,
   default: 100
  },
  // 数组/对象的默认值应当由一个工厂函数返回
  propE: {
   type: Object,
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    return value > 10
   }
  }
 }
})

type可以是下面的原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type也可以是一个自定义构造器,使用instanceof检测。当prop验证失败了,如果使用的是开发版本会抛出一条警告。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
js实现的map方法示例代码
Jan 13 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 #Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
js编写简单的聊天室功能
Aug 17 #Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 #Javascript
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
ext jquery 简单比较
2010/04/07 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
简单实现python进度条脚本
2017/12/18 Python
利用python循环创建多个文件的方法
2018/10/25 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
老生常谈python中的重载
2018/11/11 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
浅谈Python协程
2020/06/17 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
教师群众路线心得体会
2014/11/04 职场文书
三峡人家导游词
2015/01/31 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python