在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的上下文取决于你所在的对象/函数是不同的。我试图在创建的钩子中编辑道具但是找不到访问的方法。我设法通过创建过滤器来实现它，但它与我在组件中的其他代码不一致。

如果道具有一个可以访问根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，如果未定义this.lang.get('some.lang')道具，将返回foo，然后在模板中使用该属性：

<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>