Введение в компоненты Vue

Введение

При разработке большого приложения всегда полезно разбить его на более мелкие компоненты, чтобы упростить чтение, структурирование и обслуживание кода. Большинство новичков в Vue понимают, что такое компоненты, по крайней мере, концептуально, но они могут не понимать, что они могут и чего не могут делать в полной мере.

В этом руководстве мы рассмотрим, что такое компонент в Vue, как он работает, как передавать через него данные и события и многое другое.

Что такое компонент Vue?

Компоненты — это многократно используемые экземпляры элементов Vue, которые включают шаблоны, стили и элементы JavaScript. Каждый компонент является «своим», подобно тому, как каждый элемент HTML является «своим», и как компоненты Vue, так и элементы HTML позволяют нам использовать их в качестве строительных блоков для веб-страниц.

Вы можете думать о компонентах Vue как о HTML-элементах, наполненных JavaScript, которые вы можете определять и управлять ими самостоятельно.

Типичное приложение Vue состоит из множества компонентов, которые можно использовать повторно столько раз, сколько необходимо.

Например, на обычном веб-сайте есть разделы, которые появляются на всех страницах — панель навигации, шапка, футер и так далее. Поэтому считается хорошей практикой делать каждый из них отдельным компонентом. Таким образом, мы создаем хорошо структурированный, читаемый, повторно используемый и легко поддерживаемый код:

Как создать компонент Vue

Существует два основных способа создания компонента Vue, в зависимости от того, как был создан наш проект: с настройкой сборки или без нее. В первом случае каждый компонент хранится в отдельном файле. Во втором случае в одном файле может быть несколько компонентов.

Создание компонентов Vue с помощью настройки сборки

Большинство проектов создаются с использованием настройка сборки, что позволяет нам создавать однофайловые компоненты (SFC) – выделенные файлы компонентов с .vue расширение. Это позволяет нам инкапсулировать шаблон, логику и стиль компонента Vue в одном файле:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Создание компонентов Vue без настройки сборки

Если вы по какой-либо причине не можете использовать менеджер пакетов, такой как npm чтобы установить Vue на свой компьютер, вы все равно можете использовать Vue в своем приложении. Альтернатива построению Vue с использованием npm заключается в установке Vue через Сеть доставки контента (CDN) прямо в вашем приложении. Давайте просто быстро рассмотрим этот способ создания компонента Vue.

Установка Vue без сборки позволит нам использовать специфичные для Vue функции, как мы это делаем с обычным JavaScript. Синтаксис чем-то похож на то, что мы видели в обычных SFC:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

В этом руководстве мы будем использовать Синтаксис SFC, так как это наиболее часто используемый метод создания компонентов.

Как зарегистрировать компоненты в Vue

До сих пор мы видели, как создавать компоненты в Vue. Следующим шагом будет использование этих компонентов в другом компоненте. (иерархия родитель-потомок).

Для этого мы должны сначала зарегистрировать компоненты, которые хотим использовать. Эта регистрация влечет за собой импорт и последующую регистрацию компонентов. Для этого есть два варианта — Глобальный и местная регистрация.

Компоненты Vue — глобальная регистрация

Глобально зарегистрированные компоненты, как следует из названия, доступны глобально, что означает, что их можно использовать в любом компоненте нашего приложения без необходимости их повторного импорта. Это достигается путем регистрации компонента с помощью app.component() Метод:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

В ситуации, когда у нас много компонентов, мы можем цепь их таким образом:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

После того, как мы зарегистрировали наши компоненты, мы можем использовать их в шаблоне любого компонента в этом приложении, используя следующий синтаксис:

<ChildComponent/>
<ProfileComponent/>

Компоненты Vue — локальная регистрация

В большинстве случаев мы будем использовать локальную регистрацию, потому что это позволяет нам ограничивать доступность наших зарегистрированных компонентов. Импортируя эти компоненты, а затем добавляя их в components вариант выполняет это:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

При именовании компонентов используйте ВерблюжийЧехол чтобы было понятно, что это компонент Vue, а не собственный элемент HTML в шаблонах. Это также упрощает импорт и регистрацию компонентов в JavaScript.

Как передавать данные через компоненты Vue

Одним из преимуществ создания компонентов является возможность повторного использования кода, делая его модульным.

Предположим, мы создаем компонент профиля пользователя, который должен получать данные каждого учащегося со страницы профиля; в этом случае мы должны передать эти данные из компонента профиля (родительский компонент) в компонент профиля пользователя (дочерний компонент), и мы будем использовать свойства.

Реквизит

Реквизиты — это настраиваемые атрибуты, которые мы можем зарегистрировать в компоненте, поэтому мы можем передавать данные из родительского компонента в дочерний, используя props опция в теге script:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

Слотов

Слоты Vue — это зарезервированные пространства, которые позволяют нам передавать контент любого типа из одного компонента в другой. Это дает более централизованный контроль, чем props, потому что, в отличие от props, родительский компонент управляет содержимым внутри дочернего компонента. Например, мы могли бы сделать следующую кнопку:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Затем мы можем использовать этот компонент везде, где захотим, и дать ему желаемое содержимое. Отказ дать ему содержимое означает, что он будет использовать значение по умолчанию, которое мы ему дали (Click Me):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Как создавать события из компонентов Vue

Мы узнали, что реквизиты используются для отправки данных из родительского компонента в дочерний компонент. Но мы могли бы задаться вопросом, есть ли способ отправить что-то из дочернего компонента в родительский компонент. И ответ Да, события также могут быть отправлены из дочернего компонента в родительский компонент.

Предположим, у нас есть родительский компонент (App.vue), который содержит один дочерний компонент (MyBlogPost.vue). Кроме того, дочерний компонент содержит кнопку, которая должна изменить заголовок.

Предположим, мы хотим изменить заголовок нашей страницы при нажатии кнопки, чтобы сработала функция:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

И дочерний компонент будет выглядеть так:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Заключение

В этом руководстве мы узнали, как работать с компонентами в Vue, что важно для всех, кто использует Vue. Мы также узнали, как отправлять и получать данные, а также как генерировать события.

• SEO-контент и PR-распределение. Получите усиление сегодня.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
• Источник: https://stackabuse.com/introduction-to-vue-components/