Что такое компоненты?
Компонент является одной из самых мощных особенностей Vue.js. Компоненты могут расширять элементы HTML и инкапсулировать многоразовый код. На более высоком уровне компоненты являются пользовательскими элементами, а компилятор Vue.js добавляет к нему специальные функции. В некоторых случаях компоненты также могут быть в форме нативных элементов HTML, расширенных с помощью функции IS.
Эта статья является более подробным объяснением, составленным редактором на основе официальных документов. Код более полный и идеальный, что очень подходит для начинающих.
Официальная документация:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Динамические компоненты описаны ниже:
①simple:
Он должен разместить несколько компонентов в точку монтирования, а затем решить, какой из них отображается на основе переменной родительского компонента, или ни один из них не отображается.
② Динамический переключатель:
Используйте тег компонента в точке установки, а затем используйте v-bind: is = ”имя компонента», чтобы автоматически найти имя сопоставления компонента. Если нет, это не будет отображаться;
Чтобы изменить монтированный компонент, вам нужно только изменить значение директивы IS.
Как в примере кода:
<div id = "app"> <button @click = "toshow"> нажмите, чтобы позволить отображать дочерний компонент </button> <component v-bind: is = "what_to_show"> </component> </div> <script> var vm = new Vue ({el: '#App', data: {what_to_show: "First"}, methods: {tos [First »,« Second »,« Третий »," "]; Является ли дочерним компонентом 1 </div> "}, второе: {// Шаблон второго дочернего компонента:" <div> Здесь есть дочерний компонент 2 </div> "}, третий: {// Шаблон третьего дочернего компонента:" <div> Вот дочерний компонент 3 </div> "},}}); </script>иллюстрировать:
Нажав кнопку родительского компонента автоматически переключаться на отображение дочернего компонента (определяется на основе значения переменной, которая, которая_TO_SHOW).
③ Keep-Alive
Проще говоря, компонент, который был переключен (не отображается в настоящее время), непосредственно удален.
Глядя на это. $ Children Attribute в родительском компоненте, вы можете обнаружить, что когда дочерний компонент существует, длина атрибута составляет 1, а когда дочерний компонент не существует, длина атрибута составляет 0 (дочерний компонент не может быть получен);
Если дочерний компонент должен быть переключен, он все еще необходим для того, чтобы держать его в памяти, чтобы избежать повторного использования, когда он появляется в следующий раз. Затем вы должны добавить атрибут Keep-Alive в тег компонента.
Как код:
<div id = "app"> <button @click = "toshow"> нажмите, чтобы позволить дочернему компоненту отобразить </button> <component v-bind: is = "what_to_show" keep-alive> </component> </div> <script> var vm = new vue ({el: '#App', data: {what_to_show: "first"}, {tos отображать arr = [First »,« Second »,« Третий »," "]; // Шаблон первого дочернего компонента: «<div> Здесь есть дочерний компонент 1 </div>»}, второе: {// Шаблон второго дочернего компонента: «<div> Здесь дочерний компонент 2 </div>»}, третий: {// Шаблон третьего дочернего компонента: «<div> здесь - детский компонент 3 </div>»},}}); </script>иллюстрировать:
В первоначальном случае в атрибуте Vm. $ Children есть только один элемент (первый компонент). После нажатия кнопки для переключения, в атрибуте Vm. $ Children есть два элемента. После переключения снова есть три элемента (все три подкомпонента сохраняются в памяти).
После этого, независимо от того, как вы переключаетесь, будет три элемента.
④ Активировать крючок
Проще говоря, это ленивая загрузка.
Например, при инициировании запроса Ajax нам нужно подождать некоторое время. Если нам нужно загрузить запрос AJAX после его завершения, нам нужно использовать Activate Hook.
С точки зрения конкретного использования, Activate является атрибутом на том же уровне, что и атрибуты, такие как шаблон и данные. Форма является функцией. В функции есть параметр по умолчанию. Этот параметр является функцией. Компонент будет переключаться только при выполнении этой функции.
Чтобы доказать свою задержку загрузки на стороне сервера, я установил, что когда инициируется определенный запрос AJAX, он задержит за 2 секунды, прежде чем вернуть контент. Поэтому при первом переключении компонента 2 вам нужно подождать 2 секунды, прежде чем успешно переключиться:
<div id = "app"> <button @click = "toshow"> нажмите, чтобы позволить отображать дочерний компонент </button> <component v-bind: is = "what_to_show"> </component> </div> <script> var vm = new Vue ({el: '#App', data: {what_to_show: "First"}, methods: {tos [First »,« Second »,« Третий »,"]; Шаблон дочерних компонентов: «<div> здесь есть дочерний компонент 1 </div>»}, второе: {// шаблон второго дочернего компонента: «<div> Вот дочерний компонент 2, вот содержание после ajax: {{hello}} </div>», data: function () {hello: ""}}, activate: function (funt) будет переключаться на Self = this; 3 </div> "}}}); </script>Эффект кода:
【1】 При первом переходе на компонент 2 вам нужно подождать 2 секунды перед отображением (потому что Ajax инициирован);
[2] В случае Keep-Alive при переходе на компонент 2 второй или более поздний цвет нет необходимости ждать; Но контент Ajax должен отображаться через две секунды после того, как Ajax инициирован Ajax;
【3】 Без подъема (он не сохраняется в памяти после переключения), вам все равно нужно подождать при переходе на компонент 2 во второй раз.
[4] При ожидании он больше не влияет на переключение (то есть при ожидании компонента 2, нажмите, чтобы снова переключиться, чтобы переключиться непосредственно на компонент 3);
иллюстрировать:
【1】 Активировать будет выполняться только тогда, когда компонент отображается в первый раз, и функция будет выполнена только один раз (компонент появляется задерживается, когда появляется компонент)
【2】 Когда нет никакой поддержки, каждый раз, когда появляется компонент коммутатора, он будет повторно подготовлен (потому что процесс уничтожения был выполнен, когда был скрыт ранее), поэтому метод активации будет выполнен.
⑤ Режим перехода режима режима
Проще говоря, пусть динамический компонент изменится на анимацию. (Помните инструкции в разделе перехода, переходы подходят для динамических компонентов)
По умолчанию вход и выход завершены вместе; (Содержание, которое входит, может появляться ниже контента выхода, которое относится к нижней стороне оси Y. После выхода вход будет отображаться в правильном положении);
При переходе-режиме = ”out-in» анимация должна сначала выйти, а затем ввести;
При переходе-режиме = ”in-out» анимация первой и позже (так же, как проблемы, которые склонны возникать в дефолте);
Пример кода: (с использованием пользовательского имени перехода и файла animate.css)
<div id = "app"> <button @click = "toshow"> нажмите, чтобы позволить дочернему компоненту отображать </button> <компонент v-bind: is = "what_to_show" transition = "Bounce" Transition-Mode = "out-in"> </component> </div> <script> vue.transition ("bounce", {entercrasslass: 'binsinleflfclask:' binsinleflfclaslstillstillstillstillstillstillstillstillstillstillstillstillstillstillstillstillstillstle. }) var vm = new vue ({el: '#App', data: {whot_to_show: "First"}, методы: {toshow: function () {// switch -компонент отображает var arr = ["First", "второе", "третий", "]; var index = arr.indexof (this.which_to_show); ARR [Index + 1]; {{hello}} </div> ", data: function () {return {hello:" "}}}, третий: {// Шаблон третьего дочернего компонента:" <div> Здесь дочерний компонент 3 </div> "}}}}); </script>Выше приведено динамический компонент 12 -й главы Vuejs, представленной редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!