Как передать props из child в parent во vue compostion api?

В Vue.js Composition API нам доступно несколько способов для передачи данных (props) из дочернего компонента в родительский компонент. Давайте рассмотрим некоторые из этих способов.

1. Использование функциональных компонентов и контекста
В Composition API можно использовать функциональные компоненты и контекст для передачи данных из дочернего компонента в родительский компонент. Для этого нужно использовать функцию provide в родительском компоненте для предоставления данных и функцию inject в дочернем компоненте для их получения.

В родительском компоненте:

import { provide } from 'vue';

export default {
  setup() {
    const myProp = 'Hello from parent';

    provide('myPropKey', myProp);

    // ...
  },
};

В дочернем компоненте:

import { inject } from 'vue';

export default {
  setup() {
    const myProp = inject('myPropKey');

    // ...

    return {
      myProp,
    };
  },
};

2. Использование эмиттеров (emit)
В Composition API также можно использовать эмиттеры для передачи данных из дочернего компонента в родительский компонент. Для этого нужно создать эмиттер в дочернем компоненте, а затем вызвать этот эмиттер с передачей данных.

В родительском компоненте:

import { ref } from 'vue';

export default {
  setup() {
    const myProp = ref('');

    const updateMyProp = (value) => {
      myProp.value = value;
    };

    return {
      myProp,
      updateMyProp,
    };
  },
};

В дочернем компоненте:

import { ref, onMounted } from 'vue';

export default {
  setup(props, { emit }) {
    const myInput = ref('');

    const updateMyProp = () => {
      emit('update-my-prop', myInput.value);
    };

    onMounted(() => {
      updateMyProp();
    });

    return {
      myInput,
      updateMyProp,
    };
  },
};

3. Использование глобального хранилища (vuex)
Если в приложении используется глобальное хранилище Vuex, то можно воспользоваться возможностями хранилища для передачи данных между компонентами. В этом случае нужно создать геттеры и мутации в хранилище для получения и обновления данных.

В родительском компоненте:

import { mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapGetters(['myProp']),
  },
  methods: {
    ...mapMutations(['updateMyProp']),
  },
};

В дочернем компоненте:

import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      myInput: '',
    };
  },
  methods: {
    ...mapMutations(['updateMyProp']),
    updateMyPropValue() {
      this.updateMyProp(this.myInput);
    },
  },
};

Обратите внимание, что для использования Vuex требуется установить этот пакет с помощью npm или yarn и настроить его в приложении.

Вот описаны основные способы передачи props из дочернего компонента в родительский компонент в Vue.js Composition API. Выбор конкретного способа зависит от требований вашего проекта и характеристик вашего приложения.