浅谈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 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
js里面的变量范围分享
Jul 18 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
简单快速的实现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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python实现二分查找算法
2017/09/21 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Python 转换文本编码实现解析
2019/08/27 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
使用Pycharm分段执行代码
2020/04/15 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
个人查摆问题整改措施
2014/10/04 职场文书
国庆庆典邀请函
2015/02/02 职场文书
天堂的孩子观后感
2015/06/11 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书