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