Vue.js -在组件prop中使用实例globalproperty作为默认值

Question

当我在组件中设置默认prop值时，是否有任何方法可以让我从我的vue实例访问全局属性?

我想做这个

props: {
id: {
type: String,
default: this.$utils.uuid
}
}

我也试过把它包装在一个箭头函数中，但是没有成功

props: {
id: {
type: String,
default: () => this.$utils.uuid
}
}

Answer 1

我不认为这可以实现你想要的方式。这是因为props是一个对象，在组件实例之间是通用的。解决方案是使用全局$utils或使用内部数据项，而不是直接在组件中使用prop id:

使用internalId数据项:

export default {
props: {
id: {
type: String,
default: null
}
},
data () {
return {
internalId: this.id || this.$utils.uuid
}
}
}

使用全局值对象

(这个解决方案取决于你如何注册你的utils插件:

import Vue from 'vue'
export default {
props: {
id: {
type: String,
default: Vue.$utils.uuid // Depends on how you registered your plugin
}
}
}