Как корректно инициализировать компонент в 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>