Vue反应性问题：子组件中的插槽答案

【问题标题】：Vue reactivity issue: slot in child componentVue反应性问题：子组件中的插槽
【发布时间】：2020-05-22 12:53:24
【问题描述】：

我有以下设置：

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

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

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

做了更多的测试。实际上它根本与控制无关。简单的输入也是如此。

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

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

非常感谢任何帮助。

【问题讨论】：

这不会给你任何错误 ´´ 是无效的语法，你必须将它封装到 one 节点
你能把这些组件的结构贴出来吗？
尝试使用set fn 更新controlValue 。另一种不推荐的方式可以是：forceUpdate 模态组件。如果您可以发布组件的代码以及您如何更新controlValue var，将会以更好的方式提供帮助。
@YomS。你可以在这里找到这两个组件的源代码：github.com/teamfurther/cinderblock/tree/dev/src/js/components
@ShivamSingh 它通过发出输入事件来更新。源代码见上述评论中的链接。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

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

我将我的 Modal 组件更改为在插槽上有一个插槽道具。

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

【讨论】：