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>

最初安装组件时，controlValue会正确地传递给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>

我没办法解决这个问题。有任何线索吗？

非常感谢您的帮助。

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

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

1 个答案: