Компоненты Vue3

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

Компоненты — одна из самых мощных возможностей Vue.js.

Компоненты могут расширять HTML-элементы, инкапсулировать переиспользуемый код и помогать разделять ваш пользовательский интерфейс на независимые и переиспользуемые части.

Возможности и преимущества компонентов Vue

Переиспользуемость: Компоненты можно использовать многократно в разных местах, что повышает переиспользуемость и удобство сопровождения кода.
Инкапсуляция: Каждый компонент является независимой областью видимости, которая инкапсулирует собственное состояние и логику, избегая загрязнения глобальной области.
Композируемость: Сложные интерфейсы можно строить, комбинируя множество небольших компонентов.
Реактивность: Данные компонента реактивно привязаны к представлению, и представление автоматически обновляется при изменении данных.
Модульность: Поддерживается модульная разработка, а современные цепочки фронтенд-инструментов можно использовать для сборки и управления.

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

Каждое приложение Vue создается с помощью функции createApp. Параметры, передаваемые в createApp, используются для настройки корневого компонента. Когда мы монтируем приложение, этот компонент используется в качестве отправной точки для рендеринга.

Приложение нужно смонтировать в DOM-элемент.

В следующем примере мы монтируем приложение Vue к

, и в качестве аргумента следует передать #app:

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

Синтаксис регистрации глобального компонента выглядит следующим образом:

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-name— это имя компонента,/* ... */часть — это параметры конфигурации. После регистрации мы можем вызвать компонент следующим образом:

<my-component-name></my-component-name>

Простой пример компонента Vue:

Пример глобального компонента

Зарегистрируйте простой глобальный компонент example и используйте его:

<div id="app"> <example></example> </div> <script>// Создание приложения Vue const app = Vue.createApp({}) // Определение нового глобального компонента с именем example app.component('example', { template: '<h1>Пользовательский компонент!</h1>' }) app.mount('#app') </скрипт>

Попробуйте »

Далее давайте зарегистрируем компонент button-counter. После каждого клика счетчик будет увеличиваться на 1:

Пример

// Создание приложения Vue
const app = Vue.createApp({})

// Определение нового глобального компонента с именем button-counter
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
<button @click="count++">
Нажато{{ count }}раз!
</button>`
})
app.mount('#app')
</script>

Попробуйте »

Примечание: В шаблоне,`это обратная кавычка, а не одинарная кавычка.'。

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

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

Пример

Попробуйте »

Глобальные компоненты

В примерах выше все наши компоненты зарегистрированы глобально с помощью метода component.

Глобально зарегистрированные компоненты можно использовать в шаблонах экземпляров приложения, созданных после этого, включая шаблоны всех дочерних компонентов в дереве компонентов корневого экземпляра.

Пример глобального компонента

Зарегистрируйте простой глобальный компонент example и используйте его:

Попробуйте »

Локальные компоненты

Глобальная регистрация часто не является идеальной. Например, если вы используете систему сборки, такую как webpack, глобальная регистрация всех компонентов означает, что даже если вы больше не используете компонент, он всё равно будет включён в окончательный результат сборки. Это приводит к ненужному увеличению объёма JavaScript, загружаемого пользователями.

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

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

Затем определите компоненты, которые вы хотите использовать, в опции components:

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Для каждого свойства в объекте components имя свойства — это имя пользовательского элемента (component-a, component-b), а значение свойства — объект опций компонента (ComponentA, ComponentB).

Мы также можем зарегистрировать локальные компоненты в опции экземпляра, чтобы компонент можно было использовать только в этом экземпляре:

Пример локального компонента

Зарегистрируйте простой локальный компонент exampleA и используйте его:

<div id="app"> <example-a></example-a> </div> <script> var exampleA = { template: '<h1>Пользовательский компонент!</h1>' } const app = Vue.createApp({ components: { 'example-a': exampleA } }) app.mount('#app') </script>

Попробуйте »

Однофайловые компоненты (файлы .vue)

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

Пример

<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Привет от MyComponent',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>

<style scoped>
/* Приватные стили компонента */
p {
color: blue;
}
</style>

Проп

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

Данные родительского компонента должны передаваться дочерним компонентам через props, а дочерние компоненты должны явно объявить "prop" с помощью опции props:

Пример prop

<div id="app"> <site-name title="Google"></site-name> <site-name title="Example"></site-name> <site-name title="Taobao"></site-name> </div> <script> const app = Vue.createApp({}) app.component('site-name', { props: ['title'], template: `<h4>{{ title }}</h4>` }) app.mount('#app') </script>

Попробуйте »

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

Динамические props

Подобно привязке HTML-атрибутов к выражению с помощью v-bind, вы также можете использовать v-bind для динамической привязки значений prop к данным родительского компонента. Всякий раз, когда данные родительского компонента изменяются, изменение также передаётся дочернему компоненту:

Пример prop

<div id="app"> <site-info v-for="site in sites" :id="site.id" :title="site.title" ></site-info> </div> <script> const Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Example' }, { id: 3, title: 'Taobao' } ] } } } const app = Vue.createApp(Site) app.component('site-info', { props: ['id','title'], template: `<h4>{{ id }} - {{ title }}</h4>` }) app.mount('#app') </script>

Попробуйте »

Проверка prop

Компоненты могут задавать требования проверки для props.

Чтобы настроить метод проверки для props, можно вместо массива строк указать объект с требованиями проверки для значений в props. Например:

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Когда проверка prop не проходит, Vue (в сборке для разработки) выдаст предупреждение в консоли.

type может быть одним из следующих нативных конструкторов:

String
Number
Boolean
Array
Object
Date
Function
Symbol

type также может быть пользовательским конструктором; проверка выполняется с помощью instanceof.

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

Справочное руководство

Практический пример 1

Практический пример 2

Компоненты Vue3

Возможности и преимущества компонентов Vue

Пример глобального компонента

Пример

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

Пример

Глобальные компоненты

Пример глобального компонента

Локальные компоненты

Пример локального компонента

Однофайловые компоненты (файлы .vue)

Пример

Проп

Пример prop

Динамические props

Пример prop

Проверка prop