将 Vue 道具的默认设置为父选项

Question

我有一个子组件需要接受组件父级的$options 对象中给定的值作为可能的默认值。

背景：组件应该能够通过 prop 或配置获取其数据。但是有一些遗留代码依赖于作为选项传递给主 Vue 实例的数据。

创建Vue实例的新方法是这样的：

new Vue({
    el: '#app',
    render: h => h(MainComp, { 
        props: {
            document: 'data.json'
        }
    })
});

如果没有提供 prop 的值（或将其设置为最终默认值 null），组件会负责从配置文件中获取该值：

import Config from './config.js';
[...]    
props: {
    document: {
        default: Config.document || null
    },

效果很好。

但是，在旧代码中，实例过去是这样创建的：

new Vue({
    el: '#app',
    document: 'data.json',
    render: h => h(MainComp)
});

数据通过调用this.$parent.$options['document']传递到data()函数中。

我的第一个想法是将这个完全相同的代码添加到新的default：

default: this.$parent.$options['document'] || Config.document || null

但显然它不起作用，因为as the docs say“在创建组件实例之前验证了道具，因此实例属性[不]可用”。

所以我尝试通过data() 函数指定我的“特殊默认值”，如下所示：

data() {
    return {
        document: document || this.$parent.$options['document']
    };
},

但是，Vue 理所当然地抱怨：“数据属性“文档”已被声明为道具。请改用道具默认值。”

如何解决这个恶性循环？

Answer 1

这可能有效：

default: () => this.$parent.$options['document'] || Config.document || null