Главная » Статьи » Vue JS — Компоненты

Vue JS — Компоненты

Vue JS — Компоненты

От автора: Vue JS компоненты – это одна из важнейших функций VueJS, создающая пользовательские элементы, которые можно повторно использовать в HTML.

Давайте создадим компонент и на его примере разберёмся в том, как это работает во VueJS. Пример

<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

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 элемента дивов. Мы создали обычный компонент, который можно использовать с обоими экземплярами представления. Для создания компонента используется следующий синтаксис.

Vue.component('nameofthecomponent',{ // options});

После создания компонента имя компонента становится пользовательским элементом и то же самое имя можно использовать в созданном элементе экземпляра Vue, то есть внутри div с такими id: component_test и component_test1
В файле .js мы использовали test component в качестве имени компонента и то же имя используется как пользовательский элемент внутри тэгов div. Пример

<div id = "component_test"> <testcomponent></testcomponent>
</div>
<div id = "component_test1"> <testcomponent></testcomponent>
</div>

В компонент, созданный в файле .js , мы добавили шаблон, для которого задали HTML-код. Это способ регистрации глобального компонента, который можно сделать частью любого экземпляра vue, как это показано в следующем скрипте.

 Vue.component('testcomponent',{ template : '<div><h1>This is coming from component</h1></div>'
});

После выполнения этого кода в браузере будет отображаться следующее.

Компоненты получают тэги пользовательских элементов, то есть <testcomponent></testcomponent>. Однако, когда мы просмотрим это в браузере, то не увидим пользовательского тэга в чистом HTML в шаблоне, как это показано на следующем скриншоте.

Мы также напрямую сделали компоненты частью экземпляра vue, как это показано на следующем скрипте.

var vm = new Vue({ el: '#component_test', components:{ 'testcomponent': { template : '<div><h1>This is coming from component</h1></div>' } }
});

Это называется локальной регистрацией и компоненты будут частью единственного созданного экземпляра vue. Итак, мы увидели рассмотрели компонент с базовыми параметрами. А теперь давайте добавим ещё несколько параметров, например данные и методы. Точно так же, как экземпляр Vue, компоненты содержат данные и методы. Поэтому, мы расширим код, который уже видели, данными и методами. Пример

<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

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’. Оно использовано в следующем шаблоне.

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>, они связаны с использованием свойства так, как это показано на следующем примере. Пример

<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>

Результат

Динамичный компонент создаётся с использованием следующего синтаксиса.

<component v-bind:is = "view"></component>

Он содержит v-bind:is = ”view” и ему присваивается представление значения. Представление определяется экземпляром Vue следующим образом.

var vm = new Vue({ el: '#databinding', data: { view: 'component1' }, components: { 'component1': { template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>' } }
});

После выполнения шаблон Динамичные компоненты отображается в браузере.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.