浅谈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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
jQuery.each()用法分享
Jul 31 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
react 路由Link配置详解
Nov 11 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初学者头疼问题总结
2006/10/09 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
Javascript中级语法快速入手
2016/07/30 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
python梯度下降法的简单示例
2018/08/31 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
日本航空官方网站:JAL
2019/06/19 全球购物
AOP的定义以及作用
2013/09/08 面试题
汽车专业学生自我评价
2014/01/19 职场文书
优秀教师工作感言
2014/02/16 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
法院授权委托书格式
2014/09/28 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers