在 prop 对象中使用根函数

Question

我正在使用 Vuejs2。

我有一个包含一些验证的道具。我想使用一个混合到我所有组件中的Lang 对象。我的一个道具有一个默认值，需要访问这个 lang 对象。我可以在 create() 函数中访问 lang 对象，但不能在 props.foo.default() 选项中访问。

app.js

import Vue from 'vue';
import messages from '../lang/messages';
import lang from 'lang.js';

const Lang = new lang({
    'messages': messages,
    'locale': 'en'
});

Vue.mixin({
        data: function () {
            return {
                lang: Lang
            }
        }
});

const app = new Vue({
    el: '#app'
});

bar.component.vue

<template>
    <div>{{ foo }}</div>
</template>

<script>    
    export default {
        props: {
            foo: {
                type: String,
                default: this.lang.get('some.lang') // Cannot read property 'get' of undefined
            }
        },

        created () {
             console.log(this.lang.get('some.lang'); // returns correct value
        }
    }
</script>

所以澄清一下，我可以在我的 created() 函数中访问 this.lang，但我无法在我的 props 对象中访问它。

据我所知，this 的上下文因您所在的对象/函数而异。我尝试在 created 钩子中编辑道具，但找不到获取访问权限的方法。我设法通过创建一个过滤器使其工作，但它与我的组件中的其他一些代码不一致。

如果 props 有一个可以访问根 vm 或在 props 对象之外设置的默认值，有什么好方法？

Answer 1

您不能根据 Vue 实例中的数据属性设置道具的默认值。无法在props 对象的上下文中访问 Vue 实例，也无法在组件实例化后设置默认值。

或者将lang对象直接导入bar.component.vue文件：

<script>
import lang from 'lang.js'

export default {
  props: {
    foo: {
      type: String,
      default: lang.get('some.lang') 
    }
  }
}
</script>

或者，创建一个计算属性 fooVal，如果未定义 foo 属性，它将返回 this.lang.get('some.lang')，然后在模板中使用它：

<template>
  <div>{{ fooVal }}</div>
</template>

<script>    
export default {
  props: {
    foo: { type: String }
  },
  computed: {
    fooVal() {
      return (this.foo === undefined) ? this.lang.get('some.lang') : this.foo;
    }
  }
}
</script>