如何在 Vue 中设置默认inject/provide注入/提供值

Posted on by

Vue 使用提供和注入作为一种方法来将数据向下发送多个级别，而不必使用属性– 但是您知道您可以为任何注入的数据设置默认值，不应该首先注入吗？让我们看看它是如何工作的。

在 Vue 中使用inject/provide提供和注入设置默认值#

如果你不确定提供和注入是如何工作的，你可以在这里阅读。默认情况下，inject期望为provide键设置默认值 – 如果不是，它将引发运行时错误。因此，设置默认值是有益的，这样就不会触发运行时错误。

所以让我们看一个例子。像这样说你provide父母的一些数据：

<script setup>
    import { provide, ref } from 'vue'
    const message = ref('message');
    provide('myKey', message);
</script>

如果然后将其注入某处，则可以使用第二个参数设置默认值。例如：

<script setup>
    import { inject } from 'vue'
    const message = inject('myKey', 'the default value')
</script>

在此示例中，如果myKey找不到，则将默认值设置为the default value。您可以使用 Options API 实现相同的功能，如下所示：

export default {
    inject: {
        message: {
            myKey: 'the default value'
        }
    }
}

在 Vue 中为注入器设置默认值是最佳实践，有助于防止意外的运行时错误。要了解有关 Vue 的更多信息，请单击此处。

推荐阅读：