分享Vue子组件接收父组件传值的3种方式

来源：jb51　　时间：2022/3/29 13:47:15　　对本文有异议

<template>
?? ?<div>
?? ??? ?<div>父组件</div>
?? ??? ?<Student :name="name" :age="age"></Student>
?? ?</div>
</template>
 
<script>
?? ?// 引入组件
?? ?import Student from './components/Student'
?? ?
?? ?export default {
?? ??? ?name: 'App',
?? ??? ?components: {Student,},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?name: "张三",
?? ??? ??? ??? ?age: 18
?? ??? ??? ?}
?? ??? ?}
?? ??? ?
?? ?}
?? ?
</script>

1.简单声明接收

<template>
?? ?<div>
?? ??? ?<div>子组件</div>
?? ??? ?<h2>学生姓名：{{ name }}</h2>
?? ??? ?<h2>年龄：{{ age }}</h2>
?? ?</div>
</template>
 
<script>
?? ?export default {
?? ??? ?name: 'Student',
?? ??? ?data() {
?? ??? ??? ?return {}
?? ??? ?},
?? ??? ?
?? ??? ?// 简单声明接收 ----------
?? ??? ?props: ['name', 'age']
?? ??? ?// ---------------------
?? ??? ?
?? ?}
</script>

2.接收数据的同时进行类型限制

<template>
?? ?<div>
?? ??? ?<div>子组件</div>
?? ??? ?<h2>学生姓名：{{ name }}</h2>
?? ??? ?<h2>年龄：{{ age }}</h2>
?? ?</div>
</template>
 
<script>
?? ?export default {
?? ??? ?name: 'Student',
?? ??? ?data() {
?? ??? ??? ?return {}
?? ??? ?},
?? ??? ?
?? ??? ?// 接收数据的同时进行类型限制 ---
?? ??? ?props: {
?? ??? ??? ?name: String,
?? ??? ??? ?age: Number
?? ??? ?}
?? ??? ?// --------------------------
?? ??? ?
?? ?}
</script>

3.接收数据的同时对数据类型、必要性、默认值进行限制

<template>
?? ?<div>
?? ??? ?<div>子组件</div>
?? ??? ?<h2>学生姓名：{{ name }}</h2>
?? ??? ?<h2>年龄：{{ age }}</h2>
?? ?</div>
</template>
 
<script>
?? ?export default {
?? ??? ?name: 'Student',
?? ??? ?data() {
?? ??? ??? ?return {}
?? ??? ?},
?? ??? ?// 接收数据的同时对 数据类型、必要性、默认值 进行限制 -----
?? ??? ?props: {
?? ??? ??? ?name: {
?? ??? ??? ??? ?type: String,?? ? ?// name传入类型必须为字符串
?? ??? ??? ??? ?required: true ? ?// name设为必传字段
?? ??? ??? ?},
?? ??? ??? ?age: {
?? ??? ??? ??? ?type: Number,
?? ??? ??? ??? ?default: 233 ? ? ?// 默认值
?? ??? ??? ?}
?? ??? ?},
?? ??? ?// ------------------------------------------------
?? ?}
</script>