props使用细节

在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节


1.基础类型检查
2.必填数据
3.默认值
4.自定义验证函数

其中每一项也有很多细节,具体看demo


Vue.component('my-component',{
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 ['success','warning','danger'].indexOf(value) !==-1
}
}
}
})

来源:https://segmentfault.com/a/1190000016309630

Vue : props 使用细节(父组件传递数据给子组件)的更多相关文章

  1. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  2. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  3. vue 父组件传递数据给子组件

    父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...

  4. vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据

    以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...

  5. vue中父组件传数据给子组件

    父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...

  6. 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法

    1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData"   2. 子组件在props中,接收这个方法并声明 props: { onUp ...

  7. reac——父组件向子组件传递值,子组件何时能同步获得父组件改变后的值

    //这里是父组件的代码:export default class HeaderCom_son extends React.Component { constructor(props) { super( ...

  8. vue-父组件传递参数到子组件

    案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...

  9. Vue--父组件传数据给子组件,子组件生命周期过程拿到数据的情况

    需求: 在子组件渲染之前,我要修改数据的某个字段 结果是 组件在beforeUpdate,updated 的状态才能拿到父组件的数据 那么证明,我根本无法在beforeUpdate,updated两个 ...

随机推荐

  1. "Javascript高性能动画与页面渲染"笔记

    前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...

  2. 狗书(flask基础)

    为什么选择使用flask? 和其他框架相比, Flask 之所以能脱颖而出,原因在于它让开发者做主,使其能对程序具有全面的创意控制. 在 Flask 中,你可以自主选择程序的组件,如果找不到合适的,还 ...

  3. Perl语言入门--2--变量与字符串

    一.$ 简单变量:$          以$开头+字母或下划线 区分大小写,变量长度不限,没有关键字,但不能和默认变量重复 1.整数的表示: 12 12e2 #1200 -12 #-12 1_200_ ...

  4. 初学Android,BroadcastReceiver之发送接收广播

    BroadcastReceiver用于监听系统全局广播消息,由于BroadcastReceiver是一种全局的监听器,因此它可以非常方便地实现系统中不同组件之间通信 启动它需要两步 1.创建需要启动的 ...

  5. Java 并发编程中的 CyclicBarrier 用于一组线程互相等待

    Java 5 引入的 Concurrent 并发库软件包中的 CyclicBarrier 是一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point) ...

  6. 【westorm系列之二】配置格式化

    1.执行格式化后,给句尾加分号

  7. usaco feb04距离咨询

    [USACO FEB04]距离咨询 成绩   开启时间 2014年09月19日 星期五 10:08 折扣 0.8 折扣时间 2014年09月26日 星期五 10:08 允许迟交 是 关闭时间 2014 ...

  8. java基础之IO流(一)字节流

    java基础之IO流(一)之字节流 IO流体系太大,涉及到的各种流对象,我觉得很有必要总结一下. 那什么是IO流,IO代表Input.Output,而流就是原始数据源与目标媒介的数据传输的一种抽象.典 ...

  9. HttpServletRequest接口是怎么实现的

    request只是规范中的一个名称而已.不是SUN提供的,这是由各个不同的Servlet提供商编写的,SUN只是规定这个类要实现HttpServletRequest接口,并且规定了各个方法的用途,但具 ...

  10. android 查看手机运行的进程列表

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...