Vue.js 2.0 - создание компонентов многократного использования

Question

Я пытаюсь создать полностью повторно используемый компонент с использованием Vue.js 2 и отдельных файловых компонентов, и сейчас мой подход кажется невозможным реализовать.

Целью является создание компонента для создания форм для сложной, вложенной структуры JSON. Эта структура должна быть отредактирована, а затем отправлена ​​на сервер. Сам компонент отображает кнопку заголовка и отправки, но поля вместе с их размещением полностью отвечают за пользователя моего компонента. (front-end engineer)

Компонент MyForm (реализация здесь не имеет значения) передается данные JSON и url для их публикации.

Форма должна быть повторно использована многими другими пользователями, и содержание самой формы не должно быть релевантным. Он может содержать сочетание html/input/custom components в качестве детей.

Давайте представим простой сценарий без данных гнездящихся со следующими данными:

var mymodel={ name : "My name", surname : "My surname" } 

И формы я хотел бы создать с помощью моего компонента:

<MyForm :model="mymodel" :url="http://localhost/post"> 
    <div> 
    <MyTextInput v-model="model.name" label="Name"/> 
    <MyPanel> 
     <MyTextInput v-model="model.surname" label="Surname"/> 
    </MyPanel> 
    </div> 
</MyForm> 

Поэтому:

1. MyForm получает модель для отправки, сохраняет ее в данных
2. MyTextInput - это настраиваемый компонент для отображения ввода с меткой
3. Второй MyTextInput - это тот же компонент, но созданный в другом компоненте, содержащемся под названием «MyPanel», поскольку это поле должно быть по-разному.

Как мы можем видеть, что есть много проблем с передачей переменных и самой композиции:

Состав:

1. Если я поставил <slot></slot> в tempplate из MyForm для отображения полей было бы скомпилированный в родительской области, поэтому все дочерние элементы (включая MyTextField) не имеют доступа к «модели»
2. Если я пытаюсь использовать <MyForm inline-template>, я не могу автоматически отображать заголовок формы и нижний колонтитул, поскольку все содержимое заменяется. Кроме того, при использовании отдельных файловых компонентов компилятор будет искать все компоненты внутри inline-template, что означает, что мне нужно будет импортировать MyTextInput и MyPanel в MyForm, что не является практичным. Я заранее не знаю всех компонентов, которые никогда не окажутся в моей форме!

Попутных переменные:

1. Если я использовать переменные непосредственно из «модели» (в первом TextInput) я получаю предупреждение, что я модифицирование переменного из родительских и он будет переписан на следующей визуализации (но в этом случае он не будет перезаписан, так как я ИНТЕНЦИОНАЛЬНО изменяю родителя)
2. Я не могу передать модель на второй MyTextInput, не передавая ее MyPanel. Фактически, я должен был бы передать его в КАЖДОЙ пользовательский компонент между ними. И я не знаю заранее, сколько будет пользовательских компонентов.Это означает, что мне нужно будет изменить код каждого компонента, который когда-либо будет помещен в MyForm, и потребует от пользователей передачи данных для каждого настраиваемого компонента, который они включают.
3. Если я попытаюсь правильно проинформировать родителя об изменениях, мне нужно будет добавить v-on: event для каждого текстового ввода и каждого настраиваемого компонента между ними, чтобы событие достигло MyForm.

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

Является ли моя идея разрешимой с использованием Vue.js 2.0? Я разработал тот же компонент раньше для AngularJS (1.5), и он отлично работает и не требует добавления модификаций для каждого дочернего элемента формы.

Answer 1

Предлагаю вам использовать Form Input Components using Custom Events для передачи переменных в вашей форме.

Мутация опоры локально теперь считается анти-узором, например. , объявив опору a, а затем установите this.a = someOtherValue в компоненте . Из-за нового механизма рендеринга, когда компонент родительского повторно отображает, локальные изменения дочернего компонента будут перезаписаны . В общем, в 2.0 вы должны рассматривать реквизит как непреложный. Большинство вариантов использования mutating prop могут быть заменены либо данными , либо вычисленным свойством.

Answer 2

Я использую каркас ui на основе vue 2.0, и вы можете получить некоторые идеи от its implementation. Основываясь на своей реализации и моем небольшом опыте с этим, я думаю, что именно человек использует вашу инфраструктуру для сборки формы-модели. Кроме того, для формы мы всегда можем легко получить все данные, которые нужно отправить, используя поля «value реквизита без помощи v-model.

The framework's doc on form element также может быть полезным, но в настоящее время он доступен только на китайском языке, за исключением образцов кода.