Как я могу предоставить функцию с API композиции?

Можно ли предоставить функцию в Vue 3, а затем вызвать функцию в дочернем компоненте?

Я знаю, что это сработало с option API:

provide() {
    return {
        $list: this,
    };
},

Но как я могу добиться того же с composition API?

Вот мой подход:

Родительский компонент:

setup(props) {
    const handleEdit = (item) => {
       emit("edit", item);
    };

    provide("$list", handleEdit);
    
    return { handleEdit };
}

Дочерний компонент:

setup(props) {
    const { item } = props;
    const list = inject("$list");
        
    const handleEditItem = (e) => {
        list.handleEdit(item);
    };
}

А вот и ошибка Uncaught TypeError: _ctx.handleEditItem is not a function


javascript vue.js vuejs3 vue-composition-api
person Hannes A    schedule 04.03.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, вы можете сделать это, передав объект, таким образом, вы можете передать другие переменные и методы, если это необходимо.

parent.vue

setup(props) {
    const handleEdit = (item) => {
       emit("edit", item);
    };

    provide("$list", {handleEdit}); // <= change here
    
    return { handleEdit };
}
person Daniel    schedule 04.03.2021

arrow_upward
1
arrow_downward 

setup(props) {
    const { item } = props;
    const list = inject("$list");
        
    const handleEditItem = (e) => {
        list(item);
    };

    return { handleEditItem } 
}
  1. в вашем примере Vue 2 вы предоставляете весь компонент (this)
  2. В коде Vue 3 вы предоставляете только функцию handleEdit, поэтому то, что вы получаете, когда вызываете inject, снова является просто функцией
  3. Вы забыли вернуть handleEditItem из Дочернего setup - вот почему вы получили ошибку _ctx.handleEditItem is not a function
person Michal Levý    schedule 04.03.2021
comment
Спасибо! Но и это не сработало. Теперь вы знаете, как предоставить компоненту в целом API композиции? Потому что this больше не доступен. - person Hannes A; 04.03.2021
comment
Вы просто не можете предоставить весь компонент с помощью Composition API. И я все равно не думаю, что это хорошая идея - person Michal Levý; 04.03.2021
comment
Это тоже сработает. Возможно, он хотел вернуть list в качестве обработчика, а не воссоздавать handleEditItem в дочернем элементе. (Предполагая, что он пытается это сделать. Непонятно.) - person Dan; 04.03.2021
comment
Код взят из OP .... Я пытался внести минимальные изменения, необходимые для его работы. И не заметить, что OP забывает вернуть handleEditItem из настройки. Исправлено сейчас. - person Michal Levý; 05.03.2021