我们可以使用props在vue中传递变量吗？

Question

小问题：

我有 2 个父组件，其中嵌套了相同的子组件。 我使用道具，以便父母可以告诉孩子要显示什么标题。

这个子组件是一个照片库。它对数据库进行查询，下载照片并显示它们。经典。

我需要父母告诉孩子从哪里获取照片： 获取所有用户的照片，用于主页 或者 仅获取用户页面的特定用户的照片。

我想知道我是否可以通过道具传递这些信息。 那可能吗？我们可以在 setup() 函数中使用来自 prop 的信息作为变量吗？ 有没有更好的方法来做到这一点？

Answer 1

将对象从一个组件传递给子组件是 props 的目的。

您可以通过道具传递许多物品。 VueJS 内置了以下类型：

• 字符串
• 号码
• 布尔值
• 数组
• 对象
• 功能
• 承诺

在V3 VueJS guide 中，它给出了以下示例，将道具传递到组件中，然后在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)
  }
}

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