Vue : props 使用细节(父组件传递数据给子组件)
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 使用细节(父组件传递数据给子组件)的更多相关文章
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- vue 父组件传递数据给子组件
父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...
- vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据
以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...
- vue中父组件传数据给子组件
父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...
- 关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法
1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData" 2. 子组件在props中,接收这个方法并声明 props: { onUp ...
- reac——父组件向子组件传递值,子组件何时能同步获得父组件改变后的值
//这里是父组件的代码:export default class HeaderCom_son extends React.Component { constructor(props) { super( ...
- vue-父组件传递参数到子组件
案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...
- Vue--父组件传数据给子组件,子组件生命周期过程拿到数据的情况
需求: 在子组件渲染之前,我要修改数据的某个字段 结果是 组件在beforeUpdate,updated 的状态才能拿到父组件的数据 那么证明,我根本无法在beforeUpdate,updated两个 ...
随机推荐
- "Javascript高性能动画与页面渲染"笔记
前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...
- 狗书(flask基础)
为什么选择使用flask? 和其他框架相比, Flask 之所以能脱颖而出,原因在于它让开发者做主,使其能对程序具有全面的创意控制. 在 Flask 中,你可以自主选择程序的组件,如果找不到合适的,还 ...
- Perl语言入门--2--变量与字符串
一.$ 简单变量:$ 以$开头+字母或下划线 区分大小写,变量长度不限,没有关键字,但不能和默认变量重复 1.整数的表示: 12 12e2 #1200 -12 #-12 1_200_ ...
- 初学Android,BroadcastReceiver之发送接收广播
BroadcastReceiver用于监听系统全局广播消息,由于BroadcastReceiver是一种全局的监听器,因此它可以非常方便地实现系统中不同组件之间通信 启动它需要两步 1.创建需要启动的 ...
- Java 并发编程中的 CyclicBarrier 用于一组线程互相等待
Java 5 引入的 Concurrent 并发库软件包中的 CyclicBarrier 是一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point) ...
- 【westorm系列之二】配置格式化
1.执行格式化后,给句尾加分号
- usaco feb04距离咨询
[USACO FEB04]距离咨询 成绩 开启时间 2014年09月19日 星期五 10:08 折扣 0.8 折扣时间 2014年09月26日 星期五 10:08 允许迟交 是 关闭时间 2014 ...
- java基础之IO流(一)字节流
java基础之IO流(一)之字节流 IO流体系太大,涉及到的各种流对象,我觉得很有必要总结一下. 那什么是IO流,IO代表Input.Output,而流就是原始数据源与目标媒介的数据传输的一种抽象.典 ...
- HttpServletRequest接口是怎么实现的
request只是规范中的一个名称而已.不是SUN提供的,这是由各个不同的Servlet提供商编写的,SUN只是规定这个类要实现HttpServletRequest接口,并且规定了各个方法的用途,但具 ...
- android 查看手机运行的进程列表
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...