v 模型和作用域插槽不起作用?

问题描述

我有一个组件:

<input type="text" v-model="name"></slot>

输入绑定到数据中的名称.

当我使用父级中的插槽时:

<input type="text" v-model="props.name">

孩子的数据不会更新.它没有链接 - 为什么?

解决方案

您所看到的实际上是父级的默认.所以你明白我的意思，在两者中添加一些文字，比如:

默认:<input type="text" v-model="name"></slot>

实际:<input type="text" v-model="props.name">

你会看到出现的是default.

现在，发生这种情况是因为，它看起来就像一个错误，当 slot 属性与父项具有相同的名称时，该 slot 不起作用.

解决方法:重命名插槽道具.

在下面的示例中，我将其从 name 重命名为 namex.注意默认中的 v-model 保持相同的 name 因为模板中的任何东西都引用了 那个 模板的道具(换句话说，插槽道具，例如 namex，永远不会在父默认插槽中可用).

默认:<input type="text" v-model="name"></slot>

实际:<input type="text" v-model="props.namex">

I have a component:

<slot name="test" :name="name">
    <input type="text" v-model="name">
</slot>

The input is bound to name in data.

When I use the slot in the parent:

<div slot="test" slot-scope="props">
    <input type="text" v-model="props.name">
</div>

Data does not update on the child. It's not linked - why?

解决方案

What you are seeing is actually the parent's default <input>. So you understand what I mean, add some text to both, like:

<slot name="test" :name="name">
    Default: <input type="text" v-model="name">
</slot>

<div slot="test" slot-scope="props">
    Actual: <input type="text" v-model="props.name">
</div>

You'll see that what appears is the default.

Now, that happens because, it seems like a bug, when the slot prop has the same name as the parent's, the slot does not work.

Workaround: rename the slot prop.

In the example below, I renamed it from name to namex. Notice the v-model in the default remains the same name because anything in the template refers to the props of that template (in other words, slot props, e.g. namex, will never be available in the parent default slot).

<slot name="test" :namex="name">
    Default: <input type="text" v-model="name">
</slot>

<div slot="test" slot-scope="props">
    Actual: <input type="text" v-model="props.namex">
</div>

这篇关于v 模型和作用域插槽不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！