Атрибуты props в Vue3

Vue3 选项式 APIVue3 Options API

propsэто способ передачи данных между компонентами.

В Vue.js родительский компонент можетpropsпередавать данные дочерним компонентам. После того как дочерний компонент получит эти данные, он может отрисовать их или выполнить другие операции на основе этих данных.

Аналогия

Вы можетеpropsпредставьте это как почтальона. Родительский компонент — отправитель, дочерний компонент — получатель. Родительский компонент передаёт данные (письмо) черезprops(почтальона) дочернему компоненту. Получив данные, дочерний компонент может обработать их в соответствии с содержимым.

Как использовать props?

В Vue.js использованиеpropsочень просто. Ниже мы на примере покажем, как использоватьprops。

Пример: передача и получение props

Предположим, у нас есть родительский компонентParentComponentи дочерний компонентChildComponent. Мы хотим, чтобы родительский компонент передал сообщение дочернему компоненту.

1. Родительский компонент (ParentComponent.vue)

Пример

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Привет от родителя!'
    };
  }
};
</script>

2. Дочерний компонент (ChildComponent.vue)

Пример

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Объяснение

  1. Родительский компонент: В родительском компоненте мы:message="parentMessage"будетparentMessageпередаём данные дочернему компоненту.parentMessageявляется переменной, определённой в родительском компоненте, и её значение равно'Hello from Parent!'。

  2. Дочерний компонент: В дочернем компоненте мы используемpropsчтобы получить данные, переданные из родительского компонента.messageопределяется в дочернем компонентеprops, и её тип —String, и ей присвоено значениеrequired: true, указывая, что этотpropsявляется обязательным.

  3. Рендеринг: После того как дочерний компонент получаетmessage, он рендерит его в шаблоне, отображая как<p>Hello from Parent!</p>。

Типы и валидация props

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

Пример: типы и валидация

Пример

props: {
  message: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  },
  hobbies: {
    type: Array,
    validator: function (value) {
      return value.length > 0;
    }
  }
}

Объяснение

  1. **type**: укажитеpropsтип данных. Он может бытьString、Number、Boolean、Array、Objectи т. д.

  2. **required**: укажитеpropsявляется ли он обязательным. Если установлено вtrue, родительский компонент должен передать егоprops, в противном случае будет выдано предупреждение.

  3. **default**: дляpropsзадать значение по умолчанию. Если родительский компонент не передаст егоprops, дочерний компонент будет использовать значение по умолчанию.

  4. **validator**: пользовательская функция валидации, используемая для проверкиpropsсоответствует ли значение определённым условиям.

Примечания

  1. Однонаправленный поток данных: В Vue.js,propsявляется односторонним, то есть данные могут передаваться только от родительского компонента к дочернему. Дочерний компонент не должен напрямую изменятьpropsзначение. Если его нужно изменить, вы можете уведомить родительский компонент, чтобы он внёс изменение, вызвав событие.

  2. Соглашения об именовании：propsРекомендуется использовать camelCase для именования, напримерuserName. При передачеprops, рекомендуется использовать разделитель kebab-case, напримерuser-name。

  3. Динамические props: можно реализовать с помощьюv-bindили:динамическая привязкаprops, например:message="parentMessage"。

Vue3 选项式 APIVue3 Options API

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