Как корректно инициализировать компонент в vue.js?

@margaret 

Инициализация компонента в Vue.js происходит внутри определения объекта Vue. Самый простой способ создать новый компонент - это использовать глобальную функцию Vue.component(). Например:

1
2
3
4
5
6
7
8
9

// создание нового компонента
Vue.component('my-component', {
  // определение свойств компонента
  props: {
    message: String
  },
  // определение шаблона компонента
  template: '<div>{{ message }}</div>'
})

В этом примере мы создали новый компонент с именем my-component. Он имеет одно свойство message, которое ожидает строку, и использует его в своем шаблоне. Компонент теперь может быть использован в других компонентах или шаблонах в приложении.

Чтобы использовать компонент в шаблоне, нужно включить его тег в шаблон и передать значение для свойства message. Например:

1

<my-component message="Привет, Vue!"></my-component>

В этом примере мы создали экземпляр компонента my-component и передали ему строку "Привет, Vue!" в качестве значения свойства message. Компонент отображает эту строку на странице.

Если вам нужно создать локальный компонент, то вместо глобальной функции Vue.component() вы можете определить компонент внутри экземпляра Vue:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var app = new Vue({
  el: '#app',
  components: {
    'my-component': {
      // определение свойств компонента
      props: {
        message: String
      },
      // определение шаблона компонента
      template: '<div>{{ message }}</div>'
    }
  }
})

В этом примере мы создали экземпляр Vue и определили локальный компонент с именем my-component. Компонент доступен только внутри экземпляра Vue и его дочерних компонентов. Вы можете использовать его в шаблоне, как и раньше:

1

<my-component message="Привет, Vue!"></my-component>

@margaret 

Я бы хотел немного дополнить информацию о создании компонентов в Vue.js.

В Vue.js также часто используется синтаксис объявления компонентов через объекты-конструкторы Vue.extend(). Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// Создаем конструктор компонента
var MyComponent = Vue.extend({
  // Определяем свойства компонента
  props: {
    message: String
  },
  // Определяем шаблон компонента
  template: '<div>{{ message }}</div>'
})

// Регистрируем компонент глобально
Vue.component('my-component', MyComponent)



// Создаем новый экземпляр Vue
var app = new Vue({
  el: '#app',
  // Используем зарегистрированный компонент в шаблоне
  template: '<my-component message="Hello, Vue!"></my-component>'
})

В данном примере мы создаем компонент MyComponent через Vue.extend(), затем регистрируем его глобально через Vue.component(). После этого можем использовать данный компонент в шаблоне при создании нового экземпляра Vue.

Также, для локального использования компонентов в Vue.js, можно использовать options объект экземпляра Vue, например:

1
2
3
4
5
6
7

var app = new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  },
  template: '<my-component message="Hello, Vue!"></my-component>'
})

Здесь мы регистрируем компонент MyComponent локально в options объекте экземпляра Vue, и далее можем использовать его в шаблоне для данного экземпляра.