Содержание

1. Альтернатива SFC

2. Знакомимся с Single File Components

3. Как создать Single File Component Vue

Альтернатива SFC

В  предыдущем видео мы с вами посмотрели, что компоненты можно создавать с помощью JavaScript объектов.

Вот он наш компонент, который является JavaScript объектом

var app = Vue.createApp({

 data() {

   return {

     message: 'Текст'

 }

 },

template: `Разметка`

});

Вот еще один компонент, который тоже является JavaScript объектом, и у которого есть методы свойства:

app.component('proba', {

 data: () => ({

   name: 'proba'

 }),

 template: `<div>proba {{ name }}</div>`

})

Вот так мы их можем определять.

Знакомимся с Single File Components

Но, кроме создания компонентов с помощью JavaScript объектов, мы можем также создавать наши компоненты с помощью специального вида файлов, который называется SFC или Single File Component (однофайловый компонент).

Файлы этого вида представляют собой обычные текстовые файлы, которые имеют расширение *vue.

Когда вы развернете проект с помощью системы сборки, то у вас в папке src будет папка components и там будут компоненты, которые могут быть в вашей системе.

Содержимое этих файлов как раз и является Single File Component, который мы можем использовать на нашей странице.

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

Как создать Single File Component Vue

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

<template>

</template>

<script>

export default {

 name: "test.vue"

}
</script>

<style scoped>
</style>

В принципе, элемент style можно и убрать. Это стили, но, по умолчанию, их как бы оставляют. Наш однофайловый компонент представляет собой три элемента:

  • элемент template, который отвечает за шаблон, за разметку, которая будет находится в нашем компоненте.
  • скрипты. Как мы с вами говорили, что у компонента есть скрипты 
  • стили, которые обычные стили CSS, которые мы можем применять к нашему компоненту.

В скриптах мы можем написать наш уровень данных, методы, свойства и.т.д.

По сути, в разделе script у нас находится тот же самый Javascript объект. Единственное, что структура это выделена в отдельный файл и теперь здесь есть чёткое разделение, где у нас находятся скрипты, где стили, а где разметка.В больших проектах такая структура очень сильно помогает.

Соответственно, если вы разрабатываете большой проект, то вам желательно в качестве компонентов использовать именно такую структуру.

Подключение SFC в родительском компоненте

После того, как мы создали однофайловый компонент, нам нужно подключить его в родительском компоненте. 

Для этого давайте откроем файл App.vue. По сути, этот файл тоже является однофайловым компонентом.

Для того, что использовать этот тестовый компонент, мы должны его импортировать.

Например, это может выглядеть вот так:

import Test_1 from "@/components/Test_1.vue";

Далее прописываем его здесь

components: {

 Test_1

}

И в шаблоне задаем его как обычный HTML элемент.

<Test_1></Test_1>

Таким образом можно подключать наши однофайловые Vue компоненты и работать с ними.