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

本文主要是介绍Vue3_2024_10天【Vue2和Vue3父传子，使用props的区别】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

父组件往子组件传参（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>