Блог

Главная - Вопросы по программированию - Как добавить прослушиватель событий в функцию `настройка`?

Как добавить прослушиватель событий в функцию `настройка`?

#vue.js #vuejs3

#vue.js #vuejs3

Вопрос:

Начиная с vue3, $on метод больше не поддерживается.

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

 <transition name="fade" @after-enter="afterEnter">
    <div>foobar</div>
</transition>

в приведенном выше примере afterEnter функция должна быть доступна для контекста компонента, но я хочу, чтобы она не была доступна для контекста компонента.

В vue2 мы можем просто вызвать $on('after-enter', afterEnter) . Но как насчет того, чтобы сделать это в vue3?

Комментарии:

1. речь идет о перехватчиках шины событий или перехода?

2. @Boussadjra Brahim Переходные крючки

3. @yaquawa Правильно ли я понимаю, что вы хотите добавить прослушиватель событий без обновления шаблона? Как выглядел ваш код Vue 2? (как вы связали after-enter ?)

Ответ №1:

Я полагаю, вы можете быть в замешательстве. Выполнение этого кода НЕ добавит прослушиватель событий в attrs in context . Это происходит только тогда, когда вы устанавливаете событие для экземпляра компонента. Например:

 <template>
    <button>
        Toggle
    </button>
</template>

<script>
export default {
    name: 'MyButton',
    setup(props, { attrs }) {
      console.log(attrs); // Proxy {__vInternal: 1, onClick: ƒ}
    },
}
</script>
  
 <my-button @click="handleClick"></my-button>

Если вы НЕ хотите, чтобы событие отображалось в attrs в этом случае, вы должны объявить его с emits помощью .

 <template>
    <button>
        Toggle
    </button>
</template>

<script>
export default {
    name: 'MyButton',
    emits: ['click'],   // declare here
    setup(props, { attrs }) {
      console.log(attrs); // Proxy {__vInternal: 1}  the event listener is gone
    },
}
</script>
  
 <my-button @click="handleClick"></my-button>

В качестве альтернативы, если вы действительно хотите использовать $on , вы можете использовать внешнюю библиотеку, такую как mitt или tiny-emitter, для использования того же API из Vue 2.

Вот некоторые ресурсы, если это не отвечает на ваш вопрос:

https://v3-migration.vuejs.org/breaking-changes/emits-option.html#overview
https://v3-migration.vuejs.org/breaking-changes/events-api.html

Ответ №2:

Вы должны вернуть прослушиватель afterEnter из функции setup.

 <script>
export default {
  setup() {
    return { afterEnter: () => console.log('after enter hook') }
  }
}
</script>