Vue父传子的三种方式

父组件

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

子组件接收值的三种方式

 1 <template>
 2     <div>
 3         <div>学生名称：{{name}}</div>
 4         <div>学生年龄：{{age}}</div>
 5         <div>学生性别：{{sex}}</div>
 6     </div>
 7 </template>
 8 <script>
 9 export default {
10     name: 'Student',
11     // 1.简单接收
12     // props:['name','age','sex'],
13     // 2. 接收的同时对数据进行类型限制
14     // props: {
15     //     name: String,
16     //     age: Number,
17     //     sex: String
18     // },
19     // 3.
20     props: {
21         name: {
22             type: String, //name的类型是字符串
23             required: true //name是必传项
24         },
25         age: {
26             type: Number, //age的类型是数字
27             default: 99 //age不是必传项，默认值99
28         },
29         sex: {
30             type: String, //sex的类型是字符串
31             required: true //sex是必传项
32         },
33     }
34 }
35 </script>

 

posted @ 2022-07-26 14:36  往暮  阅读(5600)  评论(0)    收藏  举报