Понимание API композиции Vue defineProps и работа с реквизитами компонентов в Vue.js 3

Функция

используется для определения реквизитов компонента при использовании Composition API.

Вот пример использования defineProps:

import { defineComponent, defineProps } from 'vue';
const MyComponent = defineComponent({
  props: {
    message: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    // Access props
    console.log(props.message);
    console.log(props.count);
    // Return data, methods, and computed properties
    return {
      // ...
    };
  },
});

В этом примере definePropsиспользуется для определения реквизитов messageи countдля компонента MyComponent. Аргумент propsв функции setupобеспечивает доступ к определенным реквизитам.

Вот несколько дополнительных методов, связанных с работой с реквизитами в Vue Composition API:

  1. reactive: функция, создающая реактивный объект, который можно использовать для хранения и отслеживания реактивных данных, связанных с реквизитом.
  2. toRefs: функция, которая преобразует реактивный объект в отдельные объекты ref, что обеспечивает более детальную реактивность при работе с реквизитами.
  3. watch: функция, которая отслеживает изменения в реквизитах и ​​выполняет функцию обратного вызова при возникновении изменений.
  4. default: свойство, которое можно использовать в параметре propsдля определения значения по умолчанию для свойства.