阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

Vue子组件接收父组件传值方式

106次阅读
没有评论

共计 841 个字符,预计需要花费 3 分钟才能阅读完成。

导读 这篇文章主要给大家分享的是 Vue 子组件接收父组件传值的 3 种方式,下文更多详细的相关资料,需要而小伙伴可以参考一下
父组件代码↓
父组件
// 引入组件
import Student from './components/Student'
export default {
name: 'App',
components: {Student,},
data() {
return {
name: "张三",
age: 18
}
}
}
1. 简单声明接收
子组件
学生姓名:{{name}}
年龄:{{age}}
export default {
name: 'Student',
data() {return {}
},
// 简单声明接收 ----------
props: ['name', 'age']
// ---------------------
}
2. 接收数据的同时进行 类型限制
子组件
学生姓名:{{name}}
年龄:{{age}}
export default {
name: 'Student',
data() {return {}
},
// 接收数据的同时进行类型限制 ---
props: {
name: String,
age: Number
}
// --------------------------
}
3. 接收数据的同时对 数据类型、必要性、默认值 进行限制
子组件
学生姓名:{{name}}
年龄:{{age}}
export default {
name: 'Student',
data() {return {}
},
// 接收数据的同时对 数据类型、必要性、默认值 进行限制 -----
props: {
name: {
type: String, // name 传入类型必须为字符串
required: true // name 设为必传字段
},
age: {
type: Number,
default: 233 // 默认值
}
},
// ------------------------------------------------
}

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-07-25发表,共计841字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中