От автора: Vue JS компоненты – это одна из важнейших функций VueJS, создающая пользовательские элементы, которые можно повторно использовать в HTML.
Давайте создадим компонент и на его примере разберёмся в том, как это работает во VueJS. Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div> <script type = "text/javascript" src = "js/vue_component.js"></script> </body> </html> |
vue_component.js
|
1 2 3 4 5 6 7 8 9 |
Vue.component('testcomponent',{ template : '<div><h1>This is coming from component</h1></div>' }); var vm = new Vue({ el: '#component_test' }); var vm1 = new Vue({ el: '#component_test1' }); |
В файле .html мы создали два div с id component_test и component_test1. В вышеприведённых файлах .js два экземпляра Vue создаются с id элемента дивов. Мы создали обычный компонент, который можно использовать с обоими экземплярами представления. Для создания компонента используется следующий синтаксис.
|
1 |
Vue.component('nameofthecomponent',{ // options}); |
После создания компонента имя компонента становится пользовательским элементом и то же самое имя можно использовать в созданном элементе экземпляра Vue, то есть внутри div с такими id: component_test и component_test1
В файле .js мы использовали test component в качестве имени компонента и то же имя используется как пользовательский элемент внутри тэгов div. Пример
|
1 2 3 4 5 6 |
<div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div> |
В компонент, созданный в файле .js , мы добавили шаблон, для которого задали HTML-код. Это способ регистрации глобального компонента, который можно сделать частью любого экземпляра vue, как это показано в следующем скрипте.
|
1 2 3 |
Vue.component('testcomponent',{ template : '<div><h1>This is coming from component</h1></div>' }); |
После выполнения этого кода в браузере будет отображаться следующее.
Компоненты получают тэги пользовательских элементов, то есть <testcomponent></testcomponent>. Однако, когда мы просмотрим это в браузере, то не увидим пользовательского тэга в чистом HTML в шаблоне, как это показано на следующем скриншоте.
Мы также напрямую сделали компоненты частью экземпляра vue, как это показано на следующем скрипте.
|
1 2 3 4 5 6 7 8 |
var vm = new Vue({ el: '#component_test', components:{ 'testcomponent': { template : '<div><h1>This is coming from component</h1></div>' } } }); |
Это называется локальной регистрацией и компоненты будут частью единственного созданного экземпляра vue. Итак, мы увидели рассмотрели компонент с базовыми параметрами. А теперь давайте добавим ещё несколько параметров, например данные и методы. Точно так же, как экземпляр Vue, компоненты содержат данные и методы. Поэтому, мы расширим код, который уже видели, данными и методами. Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div> <script type = "text/javascript" src = "js/vue_component.js"></script> </body> </html> |
vue_component.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Vue.component('testcomponent',{ template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>', data: function() { return { name : "Ria" } }, methods:{ changename : function() { this.name = "Ben"; }, originalname: function() { this.name = "Ria"; } } }); var vm = new Vue({ el: '#component_test' }); var vm1 = new Vue({ el: '#component_test1' }); |
В вышеприведённый файл .js мы добавили данные, являющиеся функцией, которая возвращает объект. Объект содержит свойство name, которому присвоено значение ‘Ria’. Оно использовано в следующем шаблоне.
|
1 |
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>', |
Несмотря на то, что в компоненте данные являются функцией, мы можем использовать его свойства точно так же, как и с экземпляром Vue. Также были добавлены два метода: changename и originalname. В методе changename мы изменяем имя свойства, а в методе originalname мы изменяем его обратно на исходное имя.
Мы также добавили два события в div — mouseover и mouseout. Подробно события будут рассматриваться в разделе События. mouseover вызывает метод changename, а mouseout вызывает метод originalname. Это показано в приведённом ниже примере.
Как вы видите, такой код отображает то же самое имя, присвоенное свойству данных. Мы присвоили событие mouseover тэгу div, а также mouseout. Давайте посмотрим, что произойдёт, когда мы выполним mouseover и mouseout.
После выполнения mouseover мы видим, что имя первого компонента изменилось на Ben, а второе имя осталось прежним. Это связано с тем, что компонент данных является функцией и возвращает объект. Таким образом, если оно изменилось в одном месте, то же самое не переписывается в других местах.
Динамичные компоненты
Чтобы создать динамичные компоненты, мы используем ключевое слово <component></component>, они связаны с использованием свойства так, как это показано на следующем примере. Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <component v-bind:is = "view"></component> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { view: 'component1' }, components: { 'component1': { template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>' } } }); </script> </body> </html> |
Результат
Динамичный компонент создаётся с использованием следующего синтаксиса.
|
1 |
<component v-bind:is = "view"></component> |
Он содержит v-bind:is = ”view” и ему присваивается представление значения. Представление определяется экземпляром Vue следующим образом.
|
1 2 3 4 5 6 7 8 9 10 11 |
var vm = new Vue({ el: '#databinding', data: { view: 'component1' }, components: { 'component1': { template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>' } } }); |
После выполнения шаблон Динамичные компоненты отображается в браузере.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
