Vue.js v型和作用域插槽不工作？

我有一个组成部分：

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

输入绑定到数据中的名称

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

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

---

数据不会在子级上更新。它没有链接-为什么？

您看到的实际上是父级的默认值

。所以你明白我的意思，在两者中添加一些文本，比如：

违约：

实际：

您将看到显示的是

默认值

现在，发生这种情况是因为，这似乎是一个bug，当插槽道具与父级道具具有相同的名称时，插槽不起作用

解决方法：重命名插槽道具。 在下面的示例中，我将其从

name

重命名为

namex

。请注意，默认设置中的

v-model

保持不变

name

，因为模板中的任何内容都引用该模板的道具（换句话说，插槽道具，例如

namex

，在父默认插槽中永远不可用）

违约：

实际：

若要在作用域插槽中使用

v-model

，则

v-model

的值必须更深一级：

Vue.component('render-props', {
  data: () => ({message: 'hello', obj: {msg: 'obj_msg'}}),
  template: `<div>
    <slot name="a" :message="message">
      default: {{message}}
      <input v-model="message"/>
    </slot>
    <slot name="b" :obj="obj">
      default: {{obj.msg}}
      <input v-model="obj.msg"/>
    </slot>
  </div>`
});
new Vue({
  el: "#root",
  template: `<div>
    <render-props>
      <template v-slot:a="props">
        actual: {{props.message}}
        <input v-model="props.message"/>
      </template>
      <template v-slot:b="props">
        actual: {{props.obj.msg}}
        <input v-model="props.obj.msg"/>
      </template>
    </render-props>
    <cus_2 />
  </div>`
});

Vue.component（'render-props'{
数据：（）=>（{message:'hello'，obj:{msg:'obj_msg'}}），
模板：`
默认值：{{message}}
默认值：{obj.msg}
`
});
新Vue({
el:“根”，
模板：`
实际：{{props.message}
实际：{{props.obj.msg}
`
});

你不应该修改传递给插槽的数据，漂亮的 就像一个道具。您应该传递一个方法来更改tha 价值始终可以传递对象并修改属性（如 道具）但也不推荐使用

-从

所以我想象一下

<template>
   <slot v-bind:value="value"></slot>
</template>
<script>
export default {
  name: 'FooBar',
  data() {
    value: '',
  },
  methods: {
    updateValue(e) {
      this.value = e.target.value;
    }
  },
};
</script>

---

在子项中编辑时，它不会反映在父项中，或者在父项中编辑时，它不会反映在子项中？在父项中编辑时，它不会影响子项。恐怕这不起作用。即使有了解决方法，模型也不会绑定到子组件。您是否看到正在呈现的

实际：

文本？您不应该修改传递到插槽的道具，而应该将回调作为插槽道具传递，这将修改作为插槽道具传递的数据，这里不是这种情况。

<FooBar v-slot="slotProps">
  <input type="text" :value="slotProps.value" @input="slotProps.updateValue" />
</Foobar>