VueJS - Компоненты
Vue Components - одна из важных функций 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 с идентификаторами div. Мы создали общий компонент, который будет использоваться с обоими экземплярами представления.
Ниже приведен синтаксис для создания компонента.
Vue.component('nameofthecomponent',{ // options});После создания компонента имя компонента становится настраиваемым элементом, и то же самое можно использовать в созданном элементе экземпляра Vue, то есть внутри div с идентификаторами component_test и component_test1.
в .js файл, мы использовали тестовый компонент в качестве имени компонента, и то же имя используется как пользовательский элемент внутри div.
пример
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>В компоненте, созданном в .jsфайла, мы добавили шаблон, которому мы присвоили HTML-код. Это способregistering a global component, который можно сделать частью любого экземпляра 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>'
}
}
});Это называется local registration и компоненты будут частью только созданного экземпляра 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 мы меняем свойство name, а в originalname возвращаем исходное имя.
Мы также добавили два события в div: mouseover и mouseout. Подробности событий будут обсуждаться в главе «События». Итак, пока вызовы мышиchangename вызовы методов и мыши originalname метод.
То же самое отображается в следующем браузере.
Как видно из приведенного выше браузера, он отображает имя, назначенное в свойстве data, которое является тем же именем. Мы также назначили событие mouseover для div, а также mouseout. Давайте посмотрим, что произойдет, когда мы наведем указатель мыши и наведем указатель мыши.
При наведении курсора мыши мы видим, что имя первого компонента изменилось на 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>'
}
}
});При выполнении шаблон Dynamic Component отображается в браузере.