Vue之父传子,清晰易懂。

props之数据验证

验证的类型可以是:
String,Number,Boolean,Object,Array,Function

props:{
  props1:Number,  //必须是数值类型
  props2:[String,Number],  // 数字类型 || 字符串
  props3:{
     type:Number,  // 数值型   true为必传
     required: true
},
props4:{
    type:Boolean,  // 布尔值  default默认为true
    default: true
},
props5:{
type: Array,  // 如果是数组 || 对象 默认值必须是一个函数返回
default:function{
  return [];
}
}
}

好了,我们开始进入主题吧!

父组件如下:

<template>
<div>
<input type="text"  v-model="msg">  <!-- v-model双向绑定 -->
<son :datas=msg></son> <!-- 子组件通过datas接收msg数据 -->
</div>
</template>
<script>
import  son from  '引入子组件';
export default {
component:{ son }, // 注册组件
data(){
  return{
  msg:'我是父组件数据'
}
}
}
</script>

子组件如下:

<template>
<div>
{{datas}}   <!--这里就可以传过来的显示数据了-->
</div>
</template>
<script>
data(){
  props:{
  datas:{       // 这里的datas用于接收
  type:String,   // 我们接收验证的是字符串 也可以验证别的类型
}
}
}
</script>
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值