Vue 反应性问题:子组件中的插槽

Question

我有以下设置：

<div id="app">
{{ 'It updates here: ' + controlValue }}
<modal v-bind:is-open="showModal" v-on:close-modal="showModal = false"
>
<template v-slot:body>
{{ 'Doesn't update here ' + controlValue }}
<control
name="tag-error-control"
type="radio"
v-bind:options="options"
v-model="controlValue"
/>
</template>
</modal>
</div>

最初安装组件时，控件值将正确传递到控件。之后发生的事情是，当单击 Control 中的一个单选按钮时，值会更新，输入事件被调度，主 Vue 组件中的 controlValue 会更新，但它不会渗透到 Modal 和 Control 组件中(因为 Modal 不会重新渲染(。当我关闭模态时，它会重新渲染，我可以看到值向下渗透到模态和控制。

=======================编辑

做了更多的测试。实际上，它与控件完全无关。简单的输入也是如此。

<div id="app">
{{ 'It updates here: ' + controlValue }}
<modal v-bind:is-open="showModal" v-on:close-modal="showModal = false"
>
<template v-slot:body>
{{ 'Doesn't update here ' + controlValue }}
<input name="radio" type="radio" value="1" v-model="controlValue" />
<input name="radio" type="radio" value="2" v-model="controlValue" />
<input name="radio" type="radio" value="3" v-model="controlValue" />
<input name="radio" type="radio" value="4" v-model="controlValue" />
</template>
</modal>
</div>

我对如何解决这个问题没有想法了。有什么线索吗？

任何帮助都非常感谢。

Answer 1

所以，正如我所怀疑的那样，问题出在我的插槽范围上。

我不得不调查 https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots。

我更改了我的模态组件，以便在插槽上有一个插槽道具。

<slot name="body" v-bind:slotProps="slotProps"></slot>

然后像这样使用它：

<div id="app">
{{ 'It updates here: ' + controlValue }}
<modal v-bind:is-open="showModal" v-bind:slot-props="controlValue" v-on:close-modal="showModal = false"
>
<template v-slot:body>
{{ 'Doesn't update here ' + controlValue }}
<control
name="tag-error-control"
type="radio"
v-bind:options="options"
v-model="controlValue"
/>
</template>
</modal>
</div>