Vue3_2024_10天【Vue2和Vue3父传子，使用props的区别】

最新推荐文章于 2025-06-12 11:26:36 发布

Greg_Zhong

最新推荐文章于 2025-06-12 11:26:36 发布

阅读量460

点赞数 3

CC 4.0 BY-SA版权

文章标签： chrome 前端

本文链接：https://blog.youkuaiyun.com/qq_41930094/article/details/137479252

本文对比了Vue2和Vue3中父组件向子组件传递数据的props方法，重点介绍了Vue3中使用TypeScript时如何定义接口和限制对象类型，以及在父组件和子组件中的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件往子组件传参（props），Vue2 和 Vue3区别

有时候硬是等到快休息，才去做某些事哎,

第一：Vue2中父传子

在 Vue 2 中，props 是一种父子组件间通信的方式，用于父组件向子组件传递数据。Vue 2 中使用 props 的基本步骤：

1.父组件

<template>  
  <div>  
    <child-component :message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent'  
    }  
  }  
}  
</script>

2. 子组件接收（子组件中定义 props）

<template>  
  <div>  
    <p>{{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    message: {  
      type: String,  
      required: true,  
      default: 'Hello from Child'  
    }  
  }  
}  
</script>

第二：Vue3中父传子

前言：相比于vue2中使用props，明显vue3的麻烦多了，，，

1.定义接口（限制对象属性及类型）

// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
 id:string,
 name:string,
    age:number
   }
   
// 定义一个自定义类型Persons（用于限制检测对象数组）
export type Persons = Array<PersonInter>

2.父组件

<template>
	<Person :list="persons"/>
</template>
  
<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {reactive} from 'vue'
    import {type Persons} from './types'
  
    //默认我们在定义变量后面，直接使用ts的类型检查：let persons:Persons=reactive(...)但这是最原始的，需要在开发中将类型检测直接～用泛型<>放到reactive后面。。。
    let persons = reactive<Persons>([
     {id:'e98219e12',name:'张三',age:18},
      {id:'e98219e13',name:'李四',age:19},
       {id:'e98219e14',name:'王五',age:20}
     ])
   </script>

3.子组件

<template>
<div class="person">
 <ul>
     <li v-for="item in list" :key="item.id">
        {{item.name}}--{{item.age}}
      </li>
    </ul>
   </div>
   </template>
  
<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'
  
  // 第一种写法：仅接收
// const props = defineProps(['list'])
  
  // 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()
  
  // 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
     list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
  })
   console.log(props)
  </script>