将所有数据分配到所有插槽

Question

是否有更好的方式将我的数据分配给我的所有插槽，而无需将其绑定到每个插槽上？

所以我目前正在做

<slot name="header" :data="this._data">
    <header>
        <h2>{{ header }}</h2>
        <p>{{ subtitle }}</p>
    </header>
</slot>

为了使用数据，我必须这样做：

<finance-calculator class="app" vehicle-id="1815981">
    <template #header="data">{{ data.data.header }}</template>
</finance-calculator>

我尝试使用render方法分配数据，但这似乎根本不起作用：

render() {
    const data = this._data;
    return this.$scopedSlots['header']({
        test: 'hello'
    });
},

有人可以帮我吗？

Answer 1

您仅可以使用$data来引用组件的数据对象。像这样：

<slot name="header" :data="$data">
    <header>
        <h2>{{ header }}</h2>
        <p>{{ subtitle }}</p>
    </header>
</slot>

<finance-calculator class="app">
    <template #header="{data}">{{ data.header }}</template>
</finance-calculator>