李沧建网站公司,网站被k,图片制作视频手机软件,农家乐网站设计在 Vue 3 中#xff0c;父子组件之间的数据传递是一个常见的需求。父组件可以通过 props 将数据传递给子组件#xff0c;而子组件可以通过 defineProps 接收这些数据。本文将详细介绍父子组件传值的使用方法#xff0c;并通过优化后的代码示例演示如何实现。 1. 父子组件传值…在 Vue 3 中父子组件之间的数据传递是一个常见的需求。父组件可以通过 props 将数据传递给子组件而子组件可以通过 defineProps 接收这些数据。本文将详细介绍父子组件传值的使用方法并通过优化后的代码示例演示如何实现。 1. 父子组件传值的基本概念
1.1 Props 的作用
Props 是父组件向子组件传递数据的一种方式。子组件通过 defineProps 接收父组件传递的数据。
1.2 单向数据流
数据从父组件流向子组件子组件不能直接修改父组件传递的数据。如果需要修改父组件的数据可以通过 事件 通知父组件。 2. 父组件向子组件传递数据
2.1 父组件代码
templatePerson :titletitle :listpersons /
/templatescript langts setup nameApp
import Person from ./components/Person.vue;
import { reactive } from vue;
import { type Persons } from /types;// 定义响应式数据
const title 人员列表;
const persons reactivePersons([{ id: 1, name: John, age: 20 },{ id: 2, name: Jane, age: 21 },{ id: 3, name: Jim, age: 22 },
]);
/scriptstyle
/* 全局样式 */
/style2.2 代码解析 传递数据 父组件通过 :titletitle 将 title 字符串传递给子组件。通过 :listpersons 将 persons 数组传递给子组件。 响应式数据 使用 reactive 创建响应式数组 persons。 3. 子组件接收数据
3.1 子组件代码
templatediv classpersonh1{{ title }}/h1ulli v-foritem in list :keyitem.id{{ item.name }} - {{ item.age }} 岁/li/ul/div
/templatescript setup langts
import { type Persons } from /types;// 接收 props
defineProps{ title: string; list: Persons }();
/scriptstyle scoped
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}h1 {font-size: 24px;margin-bottom: 20px;
}ul {list-style-type: none;padding: 0;
}li {margin: 10px 0;font-size: 18px;
}
/style3.2 代码解析 接收数据 使用 defineProps 接收父组件传递的 title 和 list。通过泛型 { title: string; list: Persons } 定义 props 的类型。 渲染数据 在模板中使用 {{ title }} 显示标题。使用 v-for 遍历 list 并渲染每个人员的姓名和年龄。 4. 使用 withDefaults 设置默认值
如果父组件没有传递某些 props我们可以使用 withDefaults 为 props 设置默认值。
4.1 子组件代码带默认值
script setup langts
import { type Persons } from /types;// 接收 props 并设置默认值
withDefaults(defineProps{ title?: string; list?: Persons }(), {title: 默认标题,list: () [{ id: default-1, name: 默认人员1, age: 18 },{ id: default-2, name: 默认人员2, age: 19 },],
});
/script4.2 代码解析
设置默认值 使用 withDefaults 为 title 和 list 设置默认值。如果父组件没有传递 title 或 list子组件将使用默认值。 5. 完整代码示例
5.1 父组件App.vue
templatePerson :titletitle :listpersons /
/templatescript langts setup nameApp
import Person from ./components/Person.vue;
import { reactive } from vue;
import { type Persons } from /types;// 定义响应式数据
const title 人员列表;
const persons reactivePersons([{ id: 1, name: John, age: 20 },{ id: 2, name: Jane, age: 21 },{ id: 3, name: Jim, age: 22 },
]);
/scriptstyle
/* 全局样式 */
/style5.2 子组件Person.vue
templatediv classpersonh1{{ title }}/h1ulli v-foritem in list :keyitem.id{{ item.name }} - {{ item.age }} 岁/li/ul/div
/templatescript setup langts
import { type Persons } from /types;// 接收 props 并设置默认值
withDefaults(defineProps{ title?: string; list?: Persons }(), {title: 默认标题,list: () [{ id: default-1, name: 默认人员1, age: 18 },{ id: default-2, name: 默认人员2, age: 19 },],
});
/scriptstyle scoped
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}h1 {font-size: 24px;margin-bottom: 20px;
}ul {list-style-type: none;padding: 0;
}li {margin: 10px 0;font-size: 18px;
}
/style6. 总结 父子组件传值 父组件通过 props 向子组件传递数据。子组件通过 defineProps 接收数据。 默认值 使用 withDefaults 为 props 设置默认值。 单向数据流 数据从父组件流向子组件子组件不能直接修改父组件的数据。
通过本文的介绍和优化后的代码示例希望你能更好地理解 Vue 3 中父子组件传值的使用方法并在实际项目中灵活运用
