父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信;

使用步骤:

定义组件:现有自定义组件com-a、com-b,com-a是com-b的父组件;

准备获取数据:com-b要获取父组件data中的name属性;

在<com-b :name=“name”></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写。

在子组件定义部分里添加选项,值是个字符串数组 props:[‘name’],将上边红色的属性名称写在这里;

之后就可定义在子组件中使用name属性了;

现在就来解决上一篇博文提出的问题吧,让父组件与子组件进行通信:

vue代码:

<template id="father-template">
<div>
<h2> 父组件</h2>
username:<span>{{name}}</span>
<hr />
<child-component :name="name"></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{name}}</span> </div>
</template>
<script> new Vue({
components:{
"father-component":{
data(){
return{
name:'perfect'
}
},
template:'#father-template', components:{
"child-component":{ template:'#child-template',
props:['name']
}
}, }
} }).$mount('div');
</script>

由图可知子组件已经可以和父组件进行通信了,因为共用了属性name

现在我们就来测试一下调用父组件的多个属性,以及对属性值的绑定,可以进行观测数据的变化

该效果图的vue代码:

<template id="father-template">
<div>
<h2> 父组件</h2>
myData:<span>{{name}},{{id}},{{user.username}}</span><br />
fatherData:<span>{{msg}}</span><br />
<input type="text" v-model="name"/>
<hr />
<child-component :name="name" :id='id' :user='user'></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{name}},{{id}},{{user.username}}</span> </div>
</template>
<script> new Vue({ data:{
msg:"欢迎来到perfect*的博客园!!!"
},
components:{
"father-component":{
data(){
return{
id:,
name:'perfect',
user:{ username:'博客园---perfect*',
password:'' }
}
},
props:['msg'],
template:'#father-template', components:{
"child-component":{ template:'#child-template',
props:['name','id','user']
}
}, }
} }).$mount('div');
</script>

html:

<div>
<father-component :msg="msg"></father-component>
</div>

father-component的父组件是body,由于属性msg是全局的,所以需要使用的时候,需要进行绑定

props选项高级配置

详细介绍prop网址:https://cn.vuejs.org/v2/guide/components-props.html

在上面的props的使用是字符串数组

 props:['name','id','user']

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

对象的形式:

props:{

                                name:String,
id:Number,
user:Object
}

components:{
"father-component":{
data(){
return{
id:"",
name:'perfect',
user:{ username:'博客园---perfect*',
password:'' }
}
},

结果虽然显示出来了,但是控制台报错误了,错误显示,id的类型检测错误,它是number类型,不是一个字符串类型

解决方法:

  props:{

                                name:String,
id:[Number,String],
user:Object
}

在props中每一个属性都可以定义成对象的类型:

 props:{

                                name:{
type:String,
required:true//必须进行传值
},
id:[Number,String],
user:Object
}
}

当把组件中的name删除时,会出现下面这样的错误:

  <child-component  :id='id' :user='user'></child-component>    

解决方法:我们可以通过在name对象中定义一个属性default

  props:{

                                name:{
type:String,
//required:true,//必须进行传值 default:'perfect*'//定义一个默认值
},
id:[Number,String],
user:Object
}
}
},

这样控制台就没有错误了

接下来为user对象设置一个默认值

<child-component  :id='id' ></child-component>    
props:{

                                name:{
type:String,
//required:true,//必须进行传值 default:'perfect*'//定义一个默认值
},
id:[Number,String],
user:{
type:Object,
default:function(){
return {username:'perfect***',password:''}
}
}
}
}
},

数据校验

当定义一个属性age:18时,初始效果

校验demo:

  props:{

                                name:{
type:String,
//required:true,//必须进行传值 default:'perfect*'//定义一个默认值
},
id:[Number,String],
user:{
type:Object,
default:function(){
return {username:'perfect***',password:''}
}
}, age:{
type:Number,
validator: function (value) {
return value>=;
} }
}
}
},
 <child-component  :id='id' :age='age'></child-component>    

当age=-18时:

会进行自动校验,见控制台:

最新文章

  1. 【Win 10 应用开发】启动远程设备上的应用
  2. 【工业串口和网络软件通讯平台(SuperIO)教程】五.二次开发图形显示界面
  3. HDU1086You can Solve a Geometry Problem too(判断线段相交)
  4. Android Studio中获取查看签名SHA1证书指纹数据或MD5的方法
  5. springmvc下实现登录验证码功能
  6. Razor引擎中的_ViewStart.cshtml
  7. iOS System Services
  8. 如何在HTML5 图片预览
  9. 【原创】 windows下开发软件推荐
  10. noip 2005 等价表达式
  11. javaScript的select元素和option的相关操作
  12. Linux 文件系统同步
  13. Ajax请求URL后加随机数原理
  14. Laravel邮件发送问题小解
  15. 【javascript】变量作用范围
  16. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
  17. Xgboost总结
  18. 常见的Dos命令
  19. STL 智能指针
  20. Idea破解注册码

热门文章

  1. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
  2. 惠普披甲过VR寒冬,花费巨资开发VR游戏
  3. 记录Gzip函数
  4. 上传App Store成功后,无法构建版本解决方法
  5. Java 基础知识总结 (二、基本数据类型)
  6. VA中用文件头注释和函数头注释Suggestions
  7. iOS开发常用的第三方类库
  8. Ubuntu中useradd和adduser的区别
  9. php 写一个水仙花数的函数
  10. HDU3564 --- Another LIS (线段树维护最值问题)
  11. mac安装office2011,提示无法打开文件Normal.dotm,因为内容有错误
  12. 编译 &amp; 预处理
  13. Web开发必回知识点
  14. MongoDB数据库基本操作
  15. LFYZ-OJ ID: 1010 天使的起誓
  16. MySQL查询表中某个字段的重复数据
  17. 剑指Offer 30. 连续子数组的最大和 (数组)
  18. tomcat启动失败,提示信息:Unable to ping server at localhost:1099
  19. rtsp 学习之路一
  20. D. Vasya and Arrays