父组件代码↓

<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>

到此这篇关于分享Vue子组件接收父组件传值的3种方式的文章就介绍到这了,更多相关Vue子组件接收父组件传值内容请搜索源码搜藏网以前的文章或继续浏览下面的相关文章希望大家以后多多支持源码搜藏网！