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

Question

小问题：

我有 2 个 parent 组件，其中嵌套了相同的 child 组件。我使用道具，所以 parent 可以告诉 child 要显示什么标题。

这个 child 组件是一个照片库。它查询数据库，下载照片并显示出来。经典。

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

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

Answer 1

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

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

字符串
数量
布尔值
数组
对象
函数
承诺

在 V3 VueJS guide 中，它给出了以下示例，将 prop 传递到组件中，然后在 setup() 方法中记录到控制台。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

但是，在使用道具时，你应该始终标记它是否是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)
  }
}

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

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

Can we use props to pass variable in vue?

vue.js

vue-props