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

Question

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

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

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

请注意，这不是 Vue 模板。

我的 v-model 一直指向我的根组件，在这种情况下，我希望我的 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="model" 部分将属性从组件传播到插槽。

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

How to point to wrapping custom element with v-model?

vue.js

vue-component

vuejs2