vue.js - 将所有数据分配给所有插槽

Question

有没有更好的方法将我的数据分配给我的所有插槽，而无需在每个单独的插槽上绑定(bind)它？

所以目前我正在做:

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