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

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>