vue中可以使用props来传递变量吗？

如何解决vue中可以使用props来传递变量吗？

小问题：

我有 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)
  }
}

需要注意的是，使用默认值时，必须从函数返回值。您不能直接传递默认值。