共计 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 // 默认值 | |
} | |
}, | |
// ------------------------------------------------ | |
} |
正文完
星哥玩云-微信公众号
