Vue3 Создание однофайловых компонентов (SFC)

Однофайловый компонент Vue (т.е. файл*.vue, англ.: Single-File Component, сокращённо SFC) — это особый формат файла, который позволяет инкапсулировать шаблон, логику и стили компонента Vue в одном файле.

В Vue3 вы можете использовать.vueфайл для создания однофайловых компонентов (Single File Components, SFC). Этот файл содержит шаблон компонента, код JavaScript и стили CSS.

Теперь мы удалимnpm init vue@latestвсё содержимое в примере проекта, созданном этой командой (см.Установка Vue3), чтобы мы могли создать свою простую веб-страницу на Vue.

Прежде чем начать писать код, удалите всё содержимое внутри тегов <template>, <script> и <style>, а также любые атрибуты, такие как setup или scoped.

Теперь ваш файл App.vue должен выглядеть так:

Файл App.vue:

<script></script>

<template></template>

<style></style>

В то же время мы можем сначала очиститьsrcпапку в директорииassetsиcomponents, а файлы внутри мы можем добавить позже сами.

Измените код файла main.js на следующий:

Код файла main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Теперь мы создали простой проект. Напишите следующий код в файле App.vue:

Код файла App.vue:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, EXAMPLE!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

В приведенном выше примере мы определили простой компонент, содержащий заголовок. Шаблон компонента включает элемент <h1>, который использует синтаксис шаблонов Vue3 для привязки свойства message к текстовому содержимому этого элемента.

Часть JavaScript содержит функцию data, которая возвращает объект, содержащий свойство message, которое мы привязали к шаблону.

Наконец, стиль CSS определяет цвет заголовка как синий.

В части JavaScript компонента мы использовали новый синтаксис `export default`, который позволяет нам экспортировать определение компонента как объект по умолчанию. В Vue3 мы можем использовать этот синтаксис для определения компонентов без необходимости использовать функцию `Vue.component`, как в Vue2.

Откройтеhttp://localhost:5173/, результат выполнения приведённого выше кода:

Использование компонентов

После того как мы определили компонент, мы можем использовать этот компонент в других компонентах.

Чтобы использовать компонент, нам нужно сначала создать компонент. Например, следующий пример в каталоге./src/components/создаёт файл компонентаHelloExample.vue, и код выглядит следующим образом:

Код файла ./src/components/HelloExample.vue:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Example!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

Затем мы импортируем и определяем компонент в файле ./src/main.js:

Код файла ./src/main.js:

import { createApp } from 'vue'

import App from './App.vue'
import HelloExample from './components/HelloExample.vue'

const app = createApp(App)
app.component('hello-example', HelloExample) // Пользовательский тег
app.mount('#app')

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

Код файла App.vue

<template>
  <div>
    <hello-example></hello-example>
  </div>
</template>

Откройтеhttp://localhost:5173/, результат выполнения приведённого выше кода:

Другие расширения