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 отображается в браузере.