如何在 Vue 中使用 Props

Posted on by

属性，通常简称为“props”，是 Vue 的重要组成部分，也是我们将数据传递给子组件的关键方式。在本指南中，我们将讨论如何使用道具，以及我们为什么使用它们。本指南的重点是Vue 3，尽管所写的大部分内容也适用于 Vue 2。

Vue 中的属性或道具#

在构建许多前端框架（如 Vue）时，我们使用的基本原则之一是，新功能通常构建为组件。例如，我们可以构建一个“最流行”的组件，它看起来像这样：

<MostPopular results="10" />

大概，上面的组件创建了一个最受欢迎的帖子列表，然后只显示前 10 个。因此，我们可以保持 HTML 的自然架构，但构建更复杂的自定义 HTML 标签以在我们的设计中使用。

在上面的例子中，results是一个 prop。在上面的示例中，我们将数据传递给MostPopular组件 – 该数据是数字 10。然后组件可以使用此信息以某种方式显示数据。

然而，Vue 中的道具可能比这复杂得多。下面我们来看看如何定义props。

Vue中如何定义props#

当我们创建一个新组件时，我们可以在 Javascript中为该组件创建 props 。例如，在下面，我们创建一个名为“MostPopular”的道具和一个名为“results”的道具。

export default {
    name: "MostPopular",
    props: [ 'results' ],
    created() {
        // When the component is used/created, do something
    }
}

在 Vue 中强制执行 prop 类型

我们可以通过定义类型和道具名称来强制道具的类型。例如，下面的示例将“结果”道具强制为数字。

export default {
    name: "MostPopular",
    props: {
        results: Number
    },
    created() {
        // When the component is used/created, do something
    }
}

查看道具类型

道具不仅限于Strings 或Numbers。还允许以下类型：

  • Objects
  • Arrays
  • Symbols
  • Functions
  • Numbers
  • Strings
  • Dates
  • Booleans

我们也可以有自定义类型——可以在 Vue 中使用Class

布尔类型

如果我们将 prop 的类型设置为 Boolean，那么只需编写该 prop 的名称就会自动将其设置为 true。省略该道具会将其设置为错误。例如，下面的 HTML 相当于添加了 prop :enabled="true"。

<MostPopular enabled />

在 Vue 中为 prop 添加更多属性

如果我们想更进一步，我们可以设置一个 prop required，或者给它一个默认值。为此，我们可以将我们的道具定义为一个对象。下面的代码现在使我们的resultsprop 成为必需，并给它一个默认值 8。

export default {
    name: "MostPopular",
    props: {
        results: {
            type: Number,
            required: true,
            default: 8
        }
    },
    created() {
        // When the component is used/created, do something
    }
}

在 Vue 中使用道具#

现在我们已经介绍了基础知识，让我们看看我们如何使用道具。在最基本的层面上，我们可以添加一个只有文本或内容的道具，如下所示：

<MostPopular results="20" />

但是，我们也可以传递数据或计算值。假设我们在 Vue Javascript 中存储一些数据，如下所示：

export default {
    name: "HomePage",
    data() {
        return {
            popularData: [{
                name: "My First Post",
                views: 23453,
                url: '/my-first-post'
            },
            {
                name: "My second post!",
                views: 2395392,
                url: '/my-second-post'
            }]
        }
    }
}

假设我们现在想popularData通过一个名为data. 这可以通过在 prop 之前使用v-bind:，或者:在 Vue 3 中简称为 来实现。下面的示例现在设置results为 10，并设置data为我们数据函数中 mostPopular 的值。

<MostPopular results="20" :data="popularData"/>

这样做的好处是应该popularData改变，我们可以在我们的MostPopular组件中观察这种变化，并在我们认为合适的时候更新数据。

在 Vue 中将对象绑定为属性#

由于想要将一段数据作为一组 props 传递给子组件的情况并不少见，我们可以使用v-bind. 让我们看一个例子，我们的父组件中有一组数据：

export default {
    name: "HomePage",
    data() {
        return {
            popularData: {
                name: 'Guide Document',
                ranking: 15,
                url: '/guide-document'
            }
        }
    }
}

我们可以通过简单地执行以下操作将所有属性绑定popularData到我们的组件：

<MostPopular v-bind="popularData" />

翻译成..

<MostPopular :name="popularData.name" :ranking="popularData.ranking" :url="popularData.url" />

Vue 中的变异道具#

在 Vue 中修改 props 是不好的做法，因为在架构上 props 是单向数据系统的一部分。这意味着数据是从父级传递给子级的，而不是相反。因此，道具是只读的。如果你想更新一个 prop 值，你可以把它存储在你的data()函数中，然后改变数据变量。

export default {
    name: "MostPopular",
    data() {
        return {
            resultsData: 10
        }
    },
    props: {
        results: Number
    }
    created() {
        // Set our data 'resultsData' to the value of our prop, results
        // Note that props and data are both exposed on 'this'
        this.resultsData = this.results;

        // We can then mutate our data, rather than our prop.
        this.resultsData = 15;
    }
}

在 Vue 中验证道具值#

如果我们想在 Vue 中验证一个 prop 的值，我们可以使用一个validator函数。这让我们可以检查属性是否符合我们期望的值。例如，假设我们期望结果为 5 或 10 – 我们可以使用验证器函数检查这一点，如下所示：

export default {
    name: "MostPopular",
    data() {
        return {
            resultsData: 10
        }
    },
    props: {
        results: {
            validator(value) {
                if(value === 5 || value === 10) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
    }
}

在 Composition API 中定义 Vue 道具#

从 Vue 3 开始，我们还可以在 Vue 中考虑组合 API。如果您在组合 API 中定义道具，则必须使用该defineProps函数。幸运的是，它遵循与我们之前所做的一切相同的语法。例如，如果我们要创建一个名为的 prop name，其默认值为“my-prop”，类型为String，它看起来像这样：

<script setup>
import { defineProps } from 'vue';
    
const props = defineProps({
    name: {
        type: String,
        default: "there"
    }
});

结论#

我希望你喜欢这篇文章。如果您是 Vue 的新手，请不要忘记查看我们关于如何创建您的第一个应用程序的文章。否则，请继续订阅以获取更多信息。

推荐阅读：