浅谈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 相关文章推荐
AngularJS基础学习笔记之简单介绍
May 10 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue基础知识--axios合并请求和slot
Jun 04 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
第一节--面向对象编程
2006/11/16 PHP
YII实现分页的方法
2014/07/09 PHP
php提交post数组参数实例分析
2015/12/17 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
jQuery参数列表集合
2011/04/06 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
建材业务员岗位职责
2013/12/08 职场文书
社区活动邀请函范文
2014/01/29 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
校运动会广播稿300字
2014/10/07 职场文书
机关作风建设工作总结
2014/10/23 职场文书
遗失说明具结保证书
2015/02/26 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android