问题描述
小问题:
我有 2 个父组件,它们内部嵌套了相同的子组件。 我使用道具是为了让父母可以告诉孩子要展示什么标题。
这个子组件是一个照片库。它查询数据库,下载照片并显示出来。经典。
我需要父母告诉孩子从哪里获取照片: 获取所有用户的照片,用于主页 要么 仅获取用户页面的特定用户的照片。
我想知道是否可以通过道具传递此信息。 那可能吗?我们可以将来自 prop 的信息用作 setup() 函数内部的变量吗? 有没有更好的方法来做到这一点?
解决方法
将对象从一个组件传递给子组件是 props 的目的。
你可以通过道具传递很多物品。 VueJS 内置了以下类型:
- 字符串
- 数量
- 布尔值
- 数组
- 对象
- 功能
- 承诺
在 V3 VueJS guide 中,它给出了以下示例,将 prop 传递到组件中,然后在 setup()
方法内记录到控制台。
export default {
props: {
title: String
},setup(props) {
console.log(props.title)
}
}
但是,在使用 props 时,您应该始终标记是否是 required
,它的 type
是什么,如果不需要,default
是什么。
例如:
export default {
props: {
title: String,// This is the type
required: false,// If the prop is required
default: () => 'defaultText' // Default needed if required false
},setup(props) {
console.log(props.title)
}
}
需要注意的是,使用默认值时,必须从函数返回值。您不能直接传递默认值。