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