Question

我目前有一个自定义vue-form组件：

在我的常见HTML中，它看起来像这样：

<vue-form>
    <input type="text" v-model="test">
    <input type="password" v-model="test2">
</vue-form>

请注意，这不是Vue模板。

我的v模型一直指向我的根组件，在这种情况下，我希望我的v-model指向包装我内容的实际组件。

对于vue-form组件，我只是使用这样的插槽：

<template>
    <div>
        <slot></slot>
    </div>
</template>

有没有办法让v-model绑定指向包装组件而不是根元素？

Answer 1

您可以使用Scoped Slots documentation。

编辑：这是一个有效的例子：

<div id="app">
<vue-form v-bind:model="x">
<template scope="props">
  <input type="text" v-model="props.model.test">
  <input type="password" v-model="props.model.test2">
</template>
</vue-form>
</div>

new Vue({
el: '#app',
data: function() {
return {
  x: {
      test: 'John',
      test2: 'Smith'
  }
}
},
components: {
'vue-form': {
    template: `<div><slot :model="model"></slot></div>`,
  props: ['model']
}
}});

jsfiddle

请注意，此解决方案要求您通过以下方式将属性从组件传播到插槽：model =＆＃34; model＆＃34;参与插槽声明。

如何指向使用v-model包装自定义元素？

1 个答案: