В Vue Composition API для передачи свойств из дочернего компонента в родительский компонент можно использовать следующие методы:
1. Рефы (Refs):
- В дочернем компоненте создайте реф с использованием `ref()` функции из Composition API.
- Присвойте рефу значение, которое вы хотите передать в родительский компонент.
- Импортируйте `toRefs` функцию из Composition API в родительский компонент.
- Передайте реф в `toRefs` функцию и извлеките его значение.
- Прокиньте извлеченное значение в родительский компонент с помощью события или другим способом.
Пример использования:
Дочерний компонент (Child.vue):
```javascript
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment,
};
},
};
</script>
```
Родительский компонент (Parent.vue):
```javascript
<template>
<div>
<div>Count: {{ count }}</div>
<button @click="incrementFromChild">Increment from Child</button>
</div>
</template>
<script>
import { ref, toRefs } from 'vue';
import Child from './Child.vue';
export default {
components: {
Child,
},
setup() {
const count = ref(0);
const incrementFromChild = () => {
count.value++;
};
return {
...toRefs(count),
incrementFromChild,
};
},
};
</script>
```
2. Делегация методов (Method Delegation):
- В дочернем компоненте создайте функцию, которая вызывает необходимый метод родительского компонента и принимает значение свойства, которое вы хотите передать.
- В родительском компоненте передайте функцию в дочерний компонент в качестве свойства.
- В дочернем компоненте вызовите переданную функцию с необходимым значением.
Пример использования:
Дочерний компонент (Child.vue):
```javascript
<template>
<div>
<button @click="incrementFromChild">Increment from Child</button>
</div>
</template>
<script>
export default {
props: {
onIncrementFromChild: {
type: Function,
required: true,
},
},
setup(props) {
const incrementFromChild = () => {
props.onIncrementFromChild(1);
};
return {
incrementFromChild,
};
},
};
</script>
```
Родительский компонент (Parent.vue):
```javascript
<template>
<div>
<div>Count: {{ count }}</div>
<Child :onIncrementFromChild="incrementFromChild" />
</div>
</template>
<script>
import { ref } from 'vue';
import Child from './Child.vue';
export default {
components: {
Child,
},
setup() {
const count = ref(0);
const incrementFromChild = (value) => {
count.value += value;
};
return {
count,
incrementFromChild,
};
},
};
</script>
```
Оба этих метода позволяют передавать данные из дочернего компонента в родительский компонент с использованием Composition API во Vue. Выберите метод, который лучше подходит для вашей конкретной ситуации.