Как указать на обертку пользовательского элемента v-моделью?

В настоящее время у меня есть пользовательский компонент vue-form:

В моем обычном HTML это выглядит примерно так:

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

Обратите внимание, что это не шаблон Vue.

Моя v-модель продолжает указывать на мой корневой компонент, когда в этом случае я хотел бы, чтобы моя v-модель указывала на фактический компонент, который упаковывает мой контент.

Для компонента vue-form я просто использую такой слот:

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

Есть ли способ заставить привязку v-model указывать на компонент-оболочку, а не на корневой элемент?


vue.js vuejs2 vue-component
person Stephan-v    schedule 14.04.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете использовать документацию по слотам с ограниченной областью действия.

Изменить: вот рабочий пример:

<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" в объявлении слота.

person donMateo    schedule 14.04.2017