Что такое компонент: компоненты являются одной из самых мощных особенностей Vue.js. Компоненты могут расширять элементы HTML и инкапсулировать многоразовый код. На более высоком уровне компоненты являются пользовательскими элементами, а компилятор Vue.js добавляет к нему специальные функции. В некоторых случаях компоненты также могут быть в форме нативных элементов HTML, расширенных с помощью функции IS.
Как зарегистрировать компоненты?
Вам необходимо создать компонент, используя метод vue.extend, а затем зарегистрировать компонент, используя метод Vue.component. Формат метода Vue.Extend заключается в следующем:
var mycomponent = vue.extend ({// options ... я представлю его позже})Если вы хотите использовать этот созданный компонент в другом месте, вы должны назвать его:
Vue.component ('my-component', mycomponent)
После названия вы можете использовать это имя компонента в теге HTML, как и использование элемента DOM. Давайте посмотрим на полный пример регистрации и использования компонентов.
HTML -код:
<div id = "Пример"> <My-Component> </my-component> </div>
JS -код:
// определить var mycomponent = vue.extend ({template: '<div> Пользовательский компонент! </Div>'}) // Register vue.component ('my-component', mycomponent) // Создание корневого экземпляра New Vue ({el: '#Example'})Результат вывода:
<div id = "Пример"> <div> Пользовательский компонент! </div> </div
Вложенные компоненты
Сам компонент также может содержать компоненты. Следующий родительский компонент содержит компонент с именем-компонентом, но этот компонент может использоваться только родительскими компонентами:
var Child = vue.extend ({Template: '<div> Пользовательский компонент! </div>'}); var parent = vue.extend ({template: '<div> родительский компонент: <Child-Component> </Child-Component> </div>', компоненты: {'' kider-component ': kids}}});Приведенный выше процесс определения довольно громоздкий, и вам не нужно вызывать методы Vue.component и Vue.extend каждый раз:
// Extend and Register vue.component ('my-component', {template: '<div> Пользовательский компонент! </Div>'}) // Это также возможно с локальной регистрацией var parent = vue.extend ({компоненты: {'my-component': {Template: '<div> Custom Component!Динамические компоненты
Несколько компонентов могут использовать одну и ту же точку крепления, а затем динамически переключаться между ними. Используйте зарезервированный элемент <component>, чтобы динамически связываться с его свойством IS. В столбцах ниже есть три компонента дома, посты и архив, установленные под тем же экземпляром VUE, и динамически отображение компонентов компонента через функцию CurrentView.
HTML -код:
<div id = "dynamic"> <button Id = "Home"> Home </button> <button Id = "posts"> posts </button> <button id = "archive"> archive </button> <br> <component: is = "currentView"> </component> </div>
JS -код:
var vue = new Vue ({el: "#dynamic", data: {currentView: "Home"}, компоненты: {Home: {Template: "Home"}, посты: {Template: "posts"}, Archive: {Template: "Archive"}}}}); Document.GetElementById ("Home"). "Home";}; document.getElementById ("posts"). OnClick = function () {vue.currentView = "posts";}; document.getElementById ("archive"). onclick = function () {vue.currentView = "archive";};Компоненты и V-для
<my-component v-for = "item в элементах"> </my-component>
Данные не могут быть переданы в компонент, потому что объем компонента является независимым. Для передачи данных в компоненты следует использовать:
<мой компонент
v-for = "Предмет в элементах"
: item = "item"
: index = "$ index">
</my-component>
Причина, по которой элемент не введен автоматически в компонент, заключается в том, что это заставляет компонент тесно связан с текущим V-от. Явно заявляйте, откуда поступают данные, и могут быть повторно использованы в другом месте для компонентов.
Глубокий отзывчивый принцип
Когда компонент связывает данные, как может быть эффективным привязкой и может динамически модифицировать и добавить атрибуты? Взгляните на введение следующих принципов.
Как отслеживать изменения: передать другой объект в экземпляр Vue в качестве опции для данных, Vue.js будет пересекать свои свойства и преобразовать его в Getter/Setter с object.defineproperty. Это функция ES5, и All Vue.js не поддерживает IE8 или ниже.
Каждая инструкция/привязка данных в шаблоне имеет соответствующий объект наблюдателя, который записывает атрибуты как зависимости в процессе расчета. После этого, когда называется зависимый сеттер, пересчет наблюдателя будет вызвана. Процесс заключается в следующем:
Проблема обнаружения изменений: vue.js не может обнаружить добавление или удаление свойств объекта. Свойства должны быть в данных, чтобы позволить Vue.js конвертировать его в режим Getter/Setter, чтобы быть адаптивным. Например:
var Data = {a: 1}; var vm = new Vue ({data: data}); // `vm.a` и` data.a` теперь адаптивны vm.b = 2 // `vm.b` не являются адаптивными data.b = 2 //` data.bТем не менее, есть способы добавить атрибуты после создания экземпляра и сделать их соответствующими. Вы можете использовать метод экземпляра Set (Key, значение):
виртуальная машина set ('b', 2)
// `vm.b` и` data.b` теперь адаптивны
Для нормальных объектов вы можете использовать глобальные методы: vue.set (объект, ключ, значение):
Vue.set (data, 'c', 3)
// `vm.c` и` data.c` теперь реагируют
Инициализировать данные: хотя Vue.js обеспечивает динамическое добавление соответствующих свойств, рекомендуется объявить все соответствующие свойства на объекте данных.
Не делай этого:
var vm = new vue ({template: '<div> {{msg}} </div>'}) // затем добавьте `msg`vm. $ set ('msg', 'hello!')Это должно быть сделано:
var vm = new vue ({data: {// объявить `msg` msg: ''}, template: '<div> {{msg}} </div>'}) // Затем установите` msg`vm.msg = 'hello!'Компонент полный корпус
Примеры, представленные ниже, реализуют функцию модального окна, и код относительно прост.
HTML -код:
<!-реализовать скрипт для определения шаблона-> <script type = "x/template" id = "modal-template"> <!-независимо от того, отображается ли шаблон, устанавливается через v-show = "show", эффект анимации переходов-> <div v-show = "show" transition = "modal"> <div> <div> <div> <div> <div> <! name="header"> default header </slot> </div> <div> <!--slot is equivalent to body placeholder--> <slot name="body"> default body </slot> </div> <div> <!--slot is equivalent to footer placeholder--> <slot name="footer"> default footer </slot> <button @click="show = false">OK</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </script> <div Id = "App"> <!-Установите атрибут экземпляра Vue при нажатии кнопки. Значение ShowModal-true-> <Button Id = "Show-Modal" @click = "showmodal = true"> show modal </button> <!-Modal-это пользовательский плагин. Функция плагина показывает, что привязывает функцию Showmodal экземпляра Vue-> <modal: show.sync = "showmodal"> <!-Замените содержание слота в плагине Modal, а затем станет заголовком-> <h3 slot = "Header"> Custom Header </h3> </modal> </div>.
JS -код:
// Определите плагин с именем modalvue.component ("modal", {// Шаблон плагина связан с содержанием элемента DOM с идентификатором шаблона модального типа: "#modal-template", реквизит: {// Тип является Boolean Show: {type: Boolean, требуется: Twow: Twowlay: TwoWay: Twow: Twowlay}); // создание Vue, область применения находится под идентификатором элемента приложения, New Vue ({el: "#App", Data: {// Значение по умолчанию - false ShowModal: false}});CSS -код:
.modal-mask {позиция: фиксирована; Z-Index: 9998; Верх: 0; слева: 0; Ширина: 100%; высота: 100%; фоновый цвет: rgba (0, 0, 0, .5); дисплей: таблица; Переход: непрозрачность .3s ext;}. Modal-wrapper {display: табличная клетка; Vertical-Align: Middle;}. Modal-Container {ширина: 300px; Полевая: 0PX Auto; Заполнение: 20px 30px; фоновый цвет: #fff; граница радий: 2PX; Box-Shadow: 0 2px 8px rgba (0, 0, 0, .33); Переход: все .3s легко; Фонт-семья: helvetica, arial, sans-serif;}. Модальный заголовок h3 {margin-top: 0; Цвет: #42B983;}. Modal-Body {Margin: 20px 0;}. Модальный деф-по умолчанию {float: right;}/** Следующие стили автоматически применяются к элементам с* v-trans = "modal", когда их видимость перегибается* vue.js. .modal-Leave {opacity: 0;}. Modal-enter .modal-Container, .Modal-Leave .Modal-Container {-webkit-Transform: Scale (1.1); Преобразование: Scale (1.1);}Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Поскольку в проекте я не использовал функции компонентов, у меня нет глубокого понимания компонентов, и введение относительно поверхностно. Спасибо за чтение.