如何在道具验证器中访问“this”

Question

我正在使用 nuxt.js 处理一个项目，我正在按照官方文档中的建议在应用程序的上下文中注入一个函数https://nuxtjs.org/guide/plugins/#inject-in-root-amp-context但是当我尝试在 props 验证中调用该函数时，我收到一个错误/plugins/check-props.jsimport Vue from 'vue'Vue.prototype.$checkProps = function(value, arr) {  return arr.indexOf(value) !== -1}在组件 vue 中export default {  props: {    color: {      type: String,      validator: function (value, context) {        this.$checkProps(value, ['success', 'danger'])      }  }}ERROR: 无法读取未定义的属性“$checkProps”有谁知道我如何在验证中访问“this”？

Answer 1

Props 验证是在组件初始化之前完成的，因此this您在扩展Vue.prototype.

形成他们的文件：

请注意，在创建组件实例之前验证 props，因此实例属性（例如数据、计算等）在默认或验证器函数中将不可用。

一般来说，如果$checkProps只用于检查这些 props 的值，我只会使用一个辅助函数。

// array.helpers.js

export function containsValue(arr, val) {

  return arr.indexOf(value) !== -1

}

// component

import { containsValue } from 'path/to/helpers/array.helpers';

props: {

    foo: {

       //

       validator(value) {

          return containsValue(['foo', 'bar'], value);

       }

    }

}

更新

根据您的评论，如果您不想一遍又一遍地导入此特定功能，则可以Array.prototype.includes 查看文档

// component

props: {

    color: {

       //

       validator(value) {

          return ['success', 'danger'].includes(value);

       }

    }

}