Vue中使用props

richest_qi

已于 2022-02-09 20:33:32 修改

阅读量1.9k

点赞数 1

分类专栏： Vue2 文章标签： prop props 数据传递

于 2022-02-09 20:28:52 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/122845323

版权

Vue2 专栏收录该内容

84 篇文章 8 订阅

订阅专栏

本文详细介绍了在Vue.js中如何使用props从父组件向子组件传递数据，包括简单接收、限制数据类型、指定必要性和默认值。通过实例展示了在App.vue和Student.vue组件中的应用，强调了props类型检查的重要性以及默认值的设定，帮助读者理解Vue组件间的数据通信机制。

摘要由CSDN通过智能技术生成

可以在Vue官网访问props。
组件使用props接收从外部传递过来的数据。
组件通过props接收数据，props有三种写法：

简单接收
接收，且限制类型
接收，且限制类型、限制必要性、指定默认值。

下面举例说明。
使用Vue脚手架创建项目，并对项目进行改造：新增了单文件组件：Student.vue，修改了单文件组件：App.vue。改造后的项目目录如下：
在这里插入图片描述

简单接收

props:["name","gender","age"]

App.vue内容如下。

<template>
    <div>
        <Student name="张三" gender="男" age="25"/>
    </div>
</template>

<script>
import Student from "./components/Student";

export default {
    name:"App",
    components:{
        Student
    }
}
</script>

Student.vue内容如下。

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{gender}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
export default {
    name:"Student",
    data(){
        return {
            msg:"欢迎新同学！"
        }
    },
    props:["name","gender","age"]
}
</script>

接收，且限制类型

props:{
    name:String,
    gender:String,
    age:Number
}

接收，且限制类型：props:{ name:String, gender:String, age:Number }，即组件从外部接收的name必须是字符串，gender必须是字符串，age必须是数值。
App.vue内容如下。

<template>
    <div>
        <Student name="张三" gender="男" :age="20"/>
        <Student name="李四" gender="男" :age="25"/>
    </div>
</template>

<script>
import Student from "./components/Student";

export default {
    name:"App",
    components:{
        Student
    }
}
</script>

注意!!! 这里是:age，age前面有:，意味着等号后面是表达式。因此 20 是数值20，不是字符串20；25 是数值25，不是字符串25。

Student.vue内容如下。

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{gender}}</h2>
        <h2>学生年龄：{{age+10}}</h2>
    </div>
</template>

<script>
export default {
    name:"Student",
    data(){
        return {
            msg:"欢迎新同学！"
        }
    },
    props:{
        name:String,
        gender:String,
        age:Number
    }
}
</script>

接收，且限制类型、限制必要性、指定默认值

props:{
    name:{
        type:String,
        required:true
    },
    gender:{
        type:String,
        required:true
    },
    age:{
        type:Number,
        default:18
    }
}

接收，且限制类型、限制必要性、指定默认值：props:{ name:{ type:String, required:true }, gender:{ type:String, required:true }, age:{ type:Number, default:18 } }，即组件从外部接收的数据 name必须是字符串，且必须提供；gender必须是字符串，且必须提供；age必须是数值，如果未提供，默认值是18。

App.vue内容如下。

<template>
    <div>
        <Student name="张三" gender="男" :age="20"/>
        <Student name="李四" gender="男" :age="25"/>
        <Student name="韩梅梅" gender="女"/>
    </div>
</template>

<script>
import Student from "./components/Student";

export default {
    name:"App",
    components:{
        Student
    }
}
</script>

注意!!! 这里也是:age。且第三个Student并没有传入age。

Student.vue内容如下。

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{gender}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
export default {
    name:"Student",
    data(){
        return {
            msg:"欢迎新同学！"
        }
    },
    props:{
        name:{
            type:String,
            required:true
        },
        gender:{
            type:String,
            required:true
        },
        age:{
            type:Number,
            default:18
        }
    }
}
</script>