Vue 3 как правильно подключить компонент?

В Vue 3 компоненты подключаются немного иначе, чем в предыдущих версиях Vue. Вместо использования глобальной функции Vue.component, вам теперь необходимо использовать объект app для регистрации компонентов. Вот как правильно подключить компонент в Vue 3:

1. Создайте новый компонент. Для этого создайте новый файл с расширением .vue или .js и определите в нем компонент. Например, создайте файл MyComponent.vue:

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

<script>
export default {
  data() {
    return {
      message: 'Привет, мир!'
    }
  }
}
</script>

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

2. Импортируйте компонент в ваш главный файл (обычно main.js или App.vue). Для импорта компонента используйте оператор import. Например:

import MyComponent from './MyComponent.vue'

3. Создайте экземпляр приложения Vue с помощью функции createApp и зарегистрируйте компонент с помощью метода component(). Например:

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

const app = createApp(App)

app.component('my-component', MyComponent)

app.mount('#app')

4. Используйте компонент в вашем приложении, просто добавив его тег в разметку вашего главного компонента. Например, если вы хотите использовать MyComponent в App.vue, просто добавьте следующий тег:

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

Теперь компонент MyComponent будет отображаться в вашем приложении.

При использовании Vue CLI для создания проектов, шаги 2 и 3 организованы уже заранее, поэтому вы можете пропустить их и сразу приступить к использованию компонента. Помимо этого, в Vue 3 представлен новый синтаксис для декларации компонентов с помощью функции defineComponent. Он позволяет более явно объявить свойства компонента и его типы. Вот пример использования defineComponent:

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      message: 'Привет, мир!'
    }
  }
})
</script>

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