解决方法：重命名插槽道具。

Question

我有一个组件：

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

数据不会在孩子身上更新。它没有联系 - 为什么？

Answer 1

您所看到的实际上是父母的默认<input>。所以你明白我的意思，给两者添加一些文字，比如：

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

您会看到显示的是default。

现在，发生这种情况是因为，似乎就像一个错误，当插槽道具与父级同名时，插槽不起作用。

解决方法：重命名插槽道具。

在下面的示例中，我将其从name重命名为namex。请注意，默认设置中的v-model保持不变name，因为模板中的任何内容都指的是模板的道具（换言之，插槽道具，例如namex ，永远不会在父默认插槽中可用。）

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

Answer 2

要在作用域插槽中使用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>`
});

Answer 3

您不应该修改传递给插槽的数据非常像道具。您应该通过一种方法来更改tha 值。您总是可以传递对象并修改属性（例如道具），但也不建议

-来自https://github.com/vuejs/vue/issues/9726

所以我想像

<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-model时，您可以使用传递的作用域插槽属性，方法（updateValue）和将要更新的实际属性{ {1}}。

value

v模型和范围的插槽不工作？

3 个答案:

解决方法：重命名插槽道具。