Как можно передать метод из родительского компонента в дочерний компонент с использованием Composition API?

Question

Анатолий

vue

Как можно передать метод из родительского компонента в дочерний компонент с использованием Composition API?

Как можно переиспользовать метод `change` из родительского компонента в дочерних компонентах, чтобы избежать дублирования кода? При попытке использовать метод `change`, полученный с помощью `defineEmits`, возникает ошибка "is not a function". Какие способы существуют для передачи и вызова метода из родительского компонента в дочерние?

21 марта 2024 г. 21:29

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для передачи метода из родительского компонента в дочерний с использованием Composition API в Vue можно воспользоваться следующими способами:

1. Использование пропсов и колбэка:
Родительский компонент:

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const change = () => {
      // логика метода change
    }

    return {
      change
    }
  }
}
```

Дочерний компонент:
```javascript
import { defineProps } from 'vue';

export default {
  setup(props) {
    const { change } = defineProps(['change']);

    // теперь можно вызывать метод change из родительского компонента
  }
}
```

2. Использование provide / inject:
Родительский компонент:

```javascript
import { provide } from 'vue';

export default {
  setup() {
    provide('change', () => {
      // логика метода change
    });
  }
}
```

Дочерний компонент:
```javascript
import { inject } from 'vue';

export default {
  setup() {
    const change = inject('change');

    // теперь можно вызывать метод change из родительского компонента
  }
}
```

3. Использование контекста компонента:
Родительский компонент:

```javascript
import { ref, provide } from 'vue';

export default {
  setup() {
    const change = () => {
      // логика метода change
    }

    provide('change', change);
  }
}
```

Дочерний компонент:
```javascript
import { inject } from 'vue';

export default {
  setup() {
    const change = inject('change');

    // теперь можно вызывать метод change из родительского компонента
  }
}
``` 

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