Что такое компоненты?
Компонент является одной из самых мощных особенностей Vue.js. Компоненты могут расширять элементы HTML и инкапсулировать многоразовый код. На более высоком уровне компоненты являются пользовательскими элементами, а компилятор Vue.js добавляет к нему специальные функции. В некоторых случаях компоненты также могут быть в форме нативных элементов HTML, расширенных с помощью функции IS.
Компоненты использования
зарегистрировать
Как упоминалось ранее, мы можем создать конструктор компонента, используя vue.extend ():
var mycomponent = vue.extend ({// options ...})Чтобы использовать этот конструктор в качестве компонента, вам необходимо зарегистрироваться в `vue.component (Tag, Constructor)` **:
// глобально зарегистрировать компонент, Tag-это my-componentvue.component ('my-component', mycomponent)<p> vue.js не требует правила W3C (нижний регистр и включает в себя короткую планку) для пользовательских имен тегов, хотя лучше следовать этому правилу.
После того, как компонент зарегистрирован, его можно использовать в качестве пользовательского элемента <my-component> в модуле родительского экземпляра. Чтобы убедиться, что компонент зарегистрирован перед инициализацией корневого экземпляра:
<div id = "Пример"> <My-Component> </my-component> </div> // define var mycomponent = vue.extend ({template: '<div> Пользовательский компонент! </div>'}) // Register vue.component ('my-component', mycomponent) // create root exation veuВыдвинуто как:
<div id = "Пример"> <div> Пользовательский компонент! </div> </div>
Обратите внимание, что шаблон компонента заменяет пользовательский элемент, а функция пользовательского элемента является только в виде точки крепления. Вы можете использовать вариант экземпляра, чтобы решить, заменить ли его.
Местная регистрация
Нет необходимости регистрировать каждый компонент по всему миру. Его можно использовать только в других компонентах, зарегистрируйтесь в компонентах опции экземпляра:
var Child = vue.extend ({ / * ... * /}) var parent = vue.extend ({template: '...', components: {// <my-component> может использоваться только в шаблоне родительских компонентов 'my-component': Child}})Эта инкапсуляция также подходит для других ресурсов, таких как инструкции, фильтры и переходы.
Зарегистрировать синтаксический сахар
Чтобы упростить событие, вы можете передать объект опции напрямую вместо конструктора с параметрами vue.component () и компонентов. Vue.js автоматически вызывает vue.extend () за спиной:
// Extend and Register vue.component ('my-component', {template: '<div> Пользовательский компонент! </Div>'}) // Это также возможно с локальной регистрацией var parent = vue.extend ({компоненты: {'my-component': {Template: '<div> Custom Component!Проблемы с вариантами компонентов
Большинство вариантов, передаваемых в конструктор Vue, также могут использоваться в vue.extend (), но есть два особых случая: данные и El. Представьте себе, если мы просто передаем объект в качестве опции данных в vue.extend ():
var data = {a: 1} var mycomponent = vue.extend ({data: data})Проблема в том, что все экземпляры MyComponent будут использовать один и тот же объект «Data»! Это в основном не то, что мы хотим, поэтому мы должны использовать функцию в качестве опции «Data», чтобы вернуть новый объект:
var mycomponent = vue.extend ({data: function () {return {a: 1}}})Аналогичным образом, опция `EL также должна быть функцией при использовании в` vue.extend () `.
Анализ шаблонов
Шаблон Vue - это шаблон DOM, который использует нативный анализатор браузера вместо того, чтобы реализовать его само по себе. По сравнению с шаблонами строки, шаблоны DOM имеют некоторые преимущества, но есть проблемы, и это должен быть действительный фрагмент HTML. Некоторые элементы HTML имеют ограничения на то, что элементы могут быть помещены внутри него. Общие ограничения:
• A не может содержать другие интерактивные элементы (например, кнопки, ссылки)
• UL и OL могут только напрямую включать LI
• Выбрать может включить только опцию и optgroup
• Таблица может только напрямую включать в себя Head, Tbody, Tfoot, TR, Poot, COL, Colgroup
• TR может включать только TH и TD напрямую
На практике эти ограничения могут привести к неожиданным результатам. Хотя это может работать в простых случаях, вы не можете полагаться на пользовательские компоненты для расширения результатов до проверки браузера. Например, <my-select> <poinate> ... </option> </my-select> не является действительным шаблоном, даже если компонент My-Select в конечном итоге расширяется до <select> ... </select>.
Другим результатом является то, что пользовательские теги (включая пользовательские элементы и специальные теги, такие как <Component>, <template>, <partial>) не могут использоваться в тегах, которые имеют ограничения на внутренние элементы, такие как UL, Select, Table и т. Д. Пользовательские теги, установленные внутри этих элементов, будут упомянуты за пределами элемента, таким образом, неконтролировательно.
Для пользовательских элементов следует использовать атрибут IS:
<Таблица> <tr IS = "my-component"> </tr> </table>
`` не может быть использован в ``, `` В настоящее время, `` ``
Может быть несколько ``:
<table> <tbody v-for = "элемент в элементах"> <tr> ровная row </tr> <tr> нечетная строка </tr> </tbody> </table>
Реквизит
Передача данных с использованием реквизита
Объем экземпляров компонентов осиротеет. Это означает, что данные родительского компонента не могут и не должны упоминаться непосредственно в шаблоне дочернего компонента. Вы можете использовать реквизиты для передачи данных в детские компоненты.
«Проп» - это поле компонентов, которые, как ожидается, будут переданы из родительского компонента. Дочерние компоненты должны явно объявить реквизит с опцией реквизита:
Vue.component ('Child', {// объявить реквизиты: ['msg'], // prop можно использовать в шаблонах // Вы можете использовать `this.msg` для установки шаблона: '<pan> {{msg}} </span>'})Затем передайте его обычную строку:
<Child MSG = "Привет!"
Горб против горизонтального бара
Атрибуты HTML не чувствительны к случаям. Когда в качестве функции используется опора с именной формой Camelcase, ее необходимо преобразовать в шашлык (короткие горизонтальные линии разделены):
Vue.component ('Child', {// camelcase in javascript props: ['mymessage'], шаблон: '<pan> {{{mymessage}} </span>'}) <!-Кебаб-case в html-> <child my-message = "hello!"> </Child>Динамический реквизит
Подобно использованию v-bind для привязки атрибутов HTML с выражением, вы также можете использовать V-bind для привязки динамических рецидивов с данными родительского компонента. Всякий раз, когда меняются данные родительского компонента, они также передаются дочернему компоненту:
<div> <input v-model = "parentmsg"> <br> <child v-bind: my-message = "parentmsg"> </child> </div>
Использование аббревиатуры синтаксиса `v-bind` обычно проще:
<Ребенок: my-message = "parentmsg"> </child>
Буквальный синтаксис против динамического синтаксиса
Распространенной ошибкой для начинающих является передача числовых значений с использованием буквального синтаксиса:
<!-прошел строку "1"->
<comp some prop = "1"> </comp>
Поскольку это буквальная опора, его значение передается в строке «1» `` вместо фактического числа. Если вы хотите передать фактический номер JavaScript, вам необходимо использовать динамический синтаксис, чтобы его значение рассчитывалось как выражение JavaScript:
<!-Пройдите фактическое число->
<comp: some-prop = "1"> </comp>
ПРЕДУПРЕЖДЕНИЕ ПРЕДЛОЖЕНИЯ
Опора является односторонним привязкой по умолчанию: когда свойства родительского компонента изменятся, оно будет передано дочернему компоненту, но наоборот не будет. Это должно предотвратить случайное изменение состояния родительского компонента - это затрудняет понимание потока данных приложения. Тем не менее, также возможно явно принудительно привязать к двунаправленному или одному времени привязку с использованием модификатора связывания .sync или.
Сравнительный синтаксис:
<!-По умолчанию-одностороннее привязка-> <Ребенок: msg = "parentmsg"> </child> <!-двунаправленное связывание-> <Ребенок: msg.sync = "parentmsg"> </child> <!-одиночное привязка-> <hood: msg.once = "parentmsg"
Двунаправленное связывание синхронизирует атрибут MSG дочернего компонента обратно к атрибуту Parentmsg родительского компонента. Одиночное связывание не будет синхронизировать изменения после создания.
Обратите внимание, что если опора является объектом или массивом, он передается ссылкой. Изменение его в пределах дочернего компонента повлияет на состояние родительского компонента, независимо от используемого типа связывания.
Проверка опоры
Компоненты могут указывать требования проверки для реквизита. Это полезно, когда компоненты передаются другим, потому что эти требования к проверке образуют API компонента, гарантируя, что другие используют компонент правильно. В настоящее время значение реквизита является объектом, который содержит требования к проверке:
Vue.component ('Пример', {props: {// Обнаружение базового типа (`null` означает любой тип ok) propa: number, // несколько типов (1.0.21+) Propm: [строка, номер], // требуемый и строка propb: {type: string, требуется: true}, // число, с значениями defaul возвращать функцию в Propd: {type: Object, default: function () {return {msg: 'hello'}}}, // указать эту опору как двустороннее привязка // Если тип привязки не является правильным, предупреждение будет выбрано prope: {twoway: true}, // custom verific function propf: avaltator: value (value) {value) {value) {value) {value). Значение (новое в 1.0.12) // Конвертировать значение перед настройкой значения Propg: {coerce: function (val) {return val + '' // Преобразование значения в строку}}, proph: {coerce: function (val) {return json.parse (val) // Конвертировать строку json в объект}}}})))Тип может быть следующим нативным конструктором:
•Нить
•Число
• логический
• функция
•Объект
•Множество
Тип также может быть пользовательским конструктором, который использует экземпляры обнаружения.
Когда проверка опоры не удается, VUE отказывается установить это значение на дочерний компонент, и будет выброшено предупреждение, если будет использована версия разработки.
Компонентная компонента родительского ребенка
Родительская ссылка
Дочерний компонент может получить доступ к своему родительскому компоненту с этим. $ Parent. Потомки корневого экземпляра могут получить к нему доступ с этим. $ ROY. Родительский компонент имеет массив. Дети, которые содержат все свои детские элементы.
Хотя можно получить доступ к любому экземпляру в родительской цепочке, дочерние компоненты должны избегать полагаться непосредственно на данные родительского компонента и пытаться использовать реквизиты для явного передачи данных. Кроме того, очень плохо изменить состояние родительского компонента в детском компоненте, потому что:
1. Это позволяет родительскому компоненту быть тесно связанным с дочерним компонентом;
2. Если вы только посмотрите на родительский компонент, трудно понять состояние родительского компонента. Потому что это может быть изменено любым дочерним компонентом! В идеале, только компонент может изменить само состояние.
Пользовательские события
Экземпляр VUE реализует пользовательский интерфейс события для связи в дереве компонентов. Эта система событий не зависит от нативных событий DOM и использует ее по -разному.
Каждый экземпляр Vue является триггером события:
• Используйте $ on () для прослушивания событий;
• Используйте $ emit (), чтобы запустить событие на нем;
• Используйте $ dispatch () для распределения событий и пузырьков событий вдоль родительской цепи;
• Используйте $ Broadcast () для трансляции событий, а события передаются вниз для всех потомков.
В отличие от события DOM, событие VUE автоматически останавливает пузырь после того, как первый обратный вызов запускается во время пузырькового процесса, если обратный вызов явно не возвращает True.
Простой пример:
<!-Шаблон детского компонента-> <шаблон id = "kidle-template"> <input v-model = "msg"> <кнопка v-on: click = "notify"> dispatch event </button> </template> <!-Парионный компонент-компонент-> <div Id = "Events-Example"> <p> Сообщения: {{{{{{Сообщения | json}} </p> <dild> </child> </div> // Зарегистрировать дочерний компонент // Отправить текущее сообщение Out vue.component ('Child', {template: '#chid-template', data: function () {return {msg: 'hello'}}, методы: {уведомление: function () {if.msg.trim () {$. this.msg) this.msg = ''}}}}) // инициализируя родительский компонент // подтолкнуть событие в массив, когда сообщение получено var parent = new Vue ({el: '#Events-Example', Data: {сообщения: []}, // Когда создание экземпляра `events 'просто вызывает $` `` `` `` `` ``: `` `` `: stry ecomply ($ В случае обратного вызовов автоматически связано с экземпляром, где он зарегистрирован на этом. messages.push (msg)}}})Используйте V-on для привязки пользовательских событий
Приведенный выше пример очень хорош, но мы не можем интуитивно увидеть, где происходит событие «Child-MSG» из кода родительского компонента. Было бы лучше, если бы мы объявили обработчик событий, где подкомпоненты используются в шаблонах. Для этих подкомпонентов вы можете использовать V-on для прослушивания пользовательских событий:
<Child v-on: child-msg = "handleit"> </child>
Это дает понять: когда дочерний компонент запускает событие «Child-MSG», будет вызван метод «Handle't» родительского компонента. Весь код, который влияет на состояние родительского компонента, находится в методе родительского компонента `’ Handleit '; Дочерний компонент фокусируется только на событии запуска.
Подкомпонентный индекс
Несмотря на реквизит и события, иногда все еще необходимо получить доступ к детским компонентам непосредственно в JavaScript. Для этого вы можете использовать V-Ref для указания идентификатора индекса для дочернего компонента. Например:
<div id = "parent"> <user-profile v-ref: profile> </user-profile> </div> var parent = new Vue ({el: '#parent'}) // Доступ к дочернему компоненту var wart = parent. $ refs.profileКогда V-Ref и V-For используются вместе, ссылка-это массив или объект, который содержит соответствующие дочерние компоненты.
Используйте слот для распределения контента
При использовании компонентов вам часто приходится комбинировать их так:
<pap> <parteer> </app-header> <pap-footer> </app-footer> </app>
Обратите внимание на два пункта:
1. Компонент <ppl> не знает, какой контент будет в точке монтирования. Содержание точки монтирования определяется родительским компонентом <pap>.
2. Компонент <ppl>, вероятно, будет иметь свой шаблон.
Для того, чтобы компоненты были объединены, нам нужен способ смешать содержимое родительского компонента с собственным шаблоном компонента ребенка. Эта обработка называется распределением контента (или «перевод», если вы знакомы с Angular). Vue.js реализует API распределения контента, который относится к текущему черту спецификации веб -компонентов и использует специальный элемент <lot> в качестве слота для исходного контента.
Скомпилируйте область применения
Прежде чем погрузиться в API распределения контента, мы сначала проясняем объем компиляции контента. Предположим, что шаблон:
<Дочерний компонент>
{{msg}}
</commonconity>
Должен ли MSG быть связан с данными родительского компонента или данных, связанным с дочерним компонентом? Ответ является родительским компонентом. Объем компонента просто:
Содержание шаблона родительского компонента составлено в рамках родительского компонента; Содержание шаблона дочернего компонента составлено в рамках компонента ребенка
Распространенной ошибкой является попытка связать директиву с свойствами/методом дочернего компонента в шаблоне родительского компонента:
<!-неверно->
<дочерний компонент v-show = "somechildproperty"> </common-component>
Предполагая, что SomeChildProperty является свойством дочернего компонента, приведенный выше пример не будет работать, как и ожидалось. Шаблон родительского компонента не должен знать статус дочернего компонента.
Если вы хотите связать инструкции в подкомпоненте с корневым узлом компонента, вы должны сделать это в его шаблоне:
Vue.component ('kild-component', {// работает, потому что он находится в правильном шаблоне сферы действия: '<div v-she-she-she-shef = "somechildproperty"> child </div>', data: function () {return {somechildproperty: true}}))Аналогичным образом, содержание распределения составлено в рамках родительского компонента.
Один слот
Содержимое родительского компонента будет отброшено, если шаблон дочернего компонента не содержит <lot>. Если шаблон дочернего компонента имеет только один слот без характеристик, все содержание родительского компонента будет вставлено там, где есть слот, и замените его.
Содержание тега <LOT> считается откатом. Способный контент составляется в рамках дочернего компонента, а содержимое резервного отслеживания отображается, когда элемент хоста пуст, и для вставки нет контента.
Предположим, что компонент My-Component имеет следующий шаблон:
<div> <h1> Это мой компонент! </slot> </div>
Шаблон родительского компонента:
<my-component>
<p> Это какой -то оригинальный контент </p>
<p> Это еще более оригинальный контент </p>
</my-component>
Результат рендеринга:
<div> <h1> это мой компонент!
Названный слот
Элемент <lot> может быть настроен с помощью специального имени функции для настройки того, как распространять контент. Несколько слотов могут иметь разные имена. Названный слот будет соответствовать элементам в фрагменте содержимого, который имеет соответствующий атрибут слота.
По -прежнему может быть анонимный слот, который является слотом по умолчанию, в качестве резервного слота для сопоставления фрагментов контента, который не может быть найден. Без слота по умолчанию эти непревзойденные фрагменты контента будут отброшены.
Например, предположим, что у нас есть мультиинсердийный компонент с таким шаблоном, как:
<div> <slot name = "one"> </slot> <lot> </slot> <name = "два"> </slot> </div>
Шаблон родительского компонента:
<Многоинсертирование> <p slot = "one"> one </p> <p slot = "два"> два </p> <p> По умолчанию A </p> </multi-Insertion>
Результатом рендеринга является:
<div> <p slot = "one"> one </p> <p> по умолчанию A </p> <p slot = "два"> два </p> </div>
API распределения контента является очень полезным механизмом при объединении компонентов.
Динамические компоненты
Несколько компонентов могут использовать одну и ту же точку крепления, а затем динамически переключаться между ними. Используйте зарезервированный элемент <component>, чтобы динамически связываться с его свойством IS:
New Vue ({el: 'body', data: {currentView: 'Home'}, компоненты: {Home: {/ * ... */}, посты: {/ * ... */}, архив: {/ * ... */}}}) <Компонент: IS = "CurrentView"> <!-Component изменяется при изменении VM.CurrentView-> <IS = "> <!-Component.Сохранить
Если компонент переключена в памяти, его можно сохранить или повторно Чтобы сделать это, вы можете добавить параметр директивы «Keep-Alive»:
<компонент: is = "currentView" keep-alive>
<!-неактивные компоненты будут кэшированы->
</компонент>
активировать крючок
При переключении компонентов разрезание на компоненты могут потребовать некоторых асинхронных операций, прежде чем разрезать их. Чтобы управлять продолжительностью компонента компонента, добавьте крючок активируется к компоненту резки:
Vue.component ('Activate-Example', {activate: function (dode) {var self = this LoadDataAsync (function (data) {self.somedata = data dod ()})}})Обратите внимание, что Activate Hook действует только во время переключения динамического компонента или инициализации статического компонента и не действует при ручной вставке с использованием методов экземпляра.
переходный режим
Функция режима перехода используется для указания того, как два динамических компонента переходят.
По умолчанию введите и оставьте переход плавно. Эта функция может указать два других режима:
• In-Out: новый компонент сначала переходит, и после завершения его перехода текущий компонент будет переходить.
• Out-in: текущий компонент сначала переходит, и после завершения перехода новый компонент переходит в процесс.
Пример:
<!-Сначала исчезает, а затем исчезает в-> <component: is = "view" resation = "fade" radirot-mode = "out-in"> </component> .fade-transition {переход: непрозрачность .3s легко;}. Fade-enter,.Разнообразный
Компоненты и V-для
Пользовательские компоненты могут использовать v-for непосредственно как обычные элементы:
<my-component v-for = "item в элементах"> </my-component>
Тем не менее, данные не могут быть переданы в компонент, потому что объем компонента сирота. Для передачи данных в компоненты следует использовать:
<мой компонент
v-for = "Предмет в элементах"
: item = "item"
: index = "$ index">
</my-component>
Причина, по которой элемент не введен автоматически в компонент, заключается в том, что это заставляет компонент тесно связан с текущим V-от. Явно заявляйте, откуда поступают данные, и могут быть повторно использованы в другом месте для компонентов.
Написание многоразовых компонентов
При написании компонентов полезно помнить, следует ли повторно использовать компоненты. Нет ничего общего с жесткой связью одноразовых компонентов с другими компонентами, но многоразовые компоненты должны определять четкий общественный интерфейс.
Компонентный API Vue.js поступает из трех частей: опора, события и слот:
• Пропад позволяет внешней среде передавать данные в компоненты;
• События позволяют компонентам запускать действия во внешней среде;
• Слот позволяет внешней среде вставлять контент в структуру представления компонента.
Используя синтаксис аббревиатуры V-BIND и V-ON, отступление шаблона ясное и краткое:
<мой компонент
: foo = "baz"
: bar = "qux"
@Event-A = "Dothis"
@event-b = "dothat">
<!-Контент->
<img slot = "icon" src = "...">
<p slot = "main-text"> hello! </p>
</my-component>
Асинхронные компоненты
В крупных приложениях нам может потребоваться разделить приложение на небольшие кусочки и загрузить его с сервера только при необходимости. Чтобы облегчить ситуацию, Vue.js позволяет определять компонент как фабричную функцию, динамически анализируя определение компонента. Vue.js запускает заводскую функцию только тогда, когда компонент необходимо отображать, и кэширует результат для последующего повторного рендеринга. Например:
Vue.component ('async-example', function (resolve, disjuct) {settimeout (function () {Resolve ({Template: '<div> I Am Amync! </Div>'})}, 1000)})Функция завода получает обратный вызов разрешения, называемый при получении определения компонента с сервера. Вы также можете вызвать отклонение (разум), чтобы указать, что загрузка не удалась. Здесь Settimeout - только для демонстрации. Это полностью зависит от вас, чтобы получить компоненты. Рекомендуемая функция сегментации кода с WebPack:
Vue.component ('async-webpack-example', function (resolve) {// Этот специальный синтаксис потребности сообщает Webpack // автоматически разделить скомпилированный код на разные блоки, // эти блоки будут автоматически загружены через Ajax-запрос. Rete (['./ my-async-component'], reforle)})})})})})})})})})})})})})})})})})})})})})})})})})})}Конвенция о именовании ресурсов
Некоторые ресурсы, такие как компоненты и директивы, появляются в шаблонах как атрибуты HTML или пользовательские элементы HTML. Поскольку имена атрибутов HTML и имен тегов не чувствительны к случаям, имя ресурса обычно необходимо использовать форму кебаба вместо Camelcase, что не очень удобно.
Vue.js поддерживает название ресурсов в форме Camelcase или Pascalcase и автоматически преобразует их в кебаб-вазу в шаблоне (аналогично соглашению о именовании опоры):
// В компонентах Компоненты определения: {// зарегистрировать myComponent с помощью формы CamelCase: {/ *... */}} <!-Использование формы кебаб-казы в шаблонах-> <My-component> </my-component> ES6-объектно './components/dropdown-menu'; export default {components: {// write <text-box> и <dploddown-menu> textbox, dropdownmenu}}Рекурсивные компоненты
Компоненты могут вызывать себя рекурсивно в своих шаблонах, но только если у него есть вариант имени:
var stackoverflow = vue.extend ({name: 'stack-overflow', template: '<div>' + // call it spuring it самостоятельноВышеуказанный компонент приведет к ошибке «Максимальный размер стека превышен», поэтому убедитесь, что рекурсивный вызов имеет условие завершения. Когда компонент зарегистрирован во всем мире с использованием vue.component (), идентификатор компонента автоматически устанавливается на параметр «Имя компонента».
Фрагмент экземпляр
При использовании параметра шаблона содержимое шаблона заменяет элемент крепления экземпляра. Следовательно, элементами верхнего уровня рекомендуемого шаблона всегда являются отдельные элементы.
Не пишите шаблон так:
<div> Корневой узел 1 </div>
<div> Корневой узел 2 </div>
Рекомендуется написать это:
<div>
У меня есть один корневой узел!
<div> Узел 1 </div>
<div> Узел 2 </div>
</div>
Следующие ситуации превратят экземпляр в фрагментированный экземпляр:
1. Шаблон содержит несколько элементов верхнего уровня.
2. Шаблон содержит только нормальный текст.
3. Шаблон содержит только другие компоненты (другие компоненты могут быть экземпляром фрагмента).
4. Шаблон содержит только одну директиву элемента, такую как <partial> или <router-view> vue-router.
5. Корневой узел шаблона имеет инструкцию управления процессом, такую как V-IF или V-For.
Эти случаи позволяют экземпляру иметь неизвестное количество элементов верхнего уровня, которые будут рассматривать его содержание DOM как фрагмент. Экземпляр фрагмента по -прежнему делает содержание правильно. Тем не менее, у него нет корневого узла, его $ EL указывает на якорный узел, то есть пустой текстовый узел (узел комментариев в режиме разработки).
Но что еще более важно, не обработанные инструкции по управлению, непревзойденные функции и переходы на элементы компонентов будут проигнорированы, потому что нет корневого элемента для связывания:
<!-Нет, потому что нет корневого элемента->
<пример v-she-show = "ok" transition = "fade"> </example>
<!-реквизит да->
<Пример: prop = "onemedata"> </example>
<!-Управление процессом в порядке, но нет перехода->
<пример v-if = "ok"> </revess>
Конечно, фрагментные экземпляры имеют свое использование, но обычно лучше придать компоненту корневой узел. Это гарантирует, что инструкции и особая производительность по элементам компонентов правильно преобразованы, а производительность также немного лучше.
Встроенные шаблоны
Если дочерний компонент обладает свойством встроенного таблица, компонент будет рассматривать свой контент как свой шаблон вместо того, чтобы рассматривать его как содержание распределения. Это делает шаблон более гибким.
<мой компонент inline-template>
<p> Они скомпилированы как собственный шаблон компонента </p>
<p> Не родительский содержимое перевода. </p>
</my-component>
Тем не менее, Inline-Template затрудняет понимание масштаба шаблона и не может кэшировать результаты компиляции шаблона. Лучшая практика - использовать параметр шаблона для определения шаблонов в компоненте.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.