Как передать прослушиватель событий корневому компоненту?
Я использую vue3 и знаю, что при работе с компонентами вы можете передавать обратные вызовы прослушивателя с помощью директивы v-on или использовать ее сокращение @ (как в примере ниже).
<my component @click = "myCallback"/>
Но есть ли способ передать их в приложение (корневой компонент)?
import { createApp } from 'vue'
// import the root component App from a single-file component.
import MyComponent from './MyComponent.vue'
const app = createApp(MyComponent, {props})
Ответы 2
v-on-* синтаксис шаблона переведен в on* props в функции h, которая используется для создания vnodes. Учитывая, что MyComponent генерирует foo событие, это:
const app = createApp(MyComponent, { onFoo() {...} })
Я думаю, ваш ответ слишком сложен для этого случая. :-)
Зависит от того, чего хочет ОП, что неизвестно. Если намерение состоит в том, чтобы каким-то образом взаимодействовать с root comp в точке входа, то это делается так.
Извиняюсь за плохое построение вопроса. Это именно то, что я искал. Я отредактирую это, чтобы другие могли понять. Спасибо @EstusFlask!
@EstusFlask Хорошо, ты выиграл. :-)
Вы не передаете обратные вызовы компонентам, а реагируете на события от них. Если вы хотите отреагировать на какое-то событие в Vue root app, просто определите v-on в корневом шаблоне.
Итак, для вашего примера:
Если вы поместите свой компонент в шаблон приложения и определите обратный вызов как метод приложения, тогда ваш метод будет вызываться при возникновении события.
Приложение
<template>
<my component @click = "myCallback"/>
</template>
и
methods: {
myCallback(event) {
....
}
}
Пример
const MyComp = {
emits: ['click'],
template: `<button id = "my-button" @click = "$emit('click', $event)">Click me!</button>`
}
const App = {
components: { MyComp },
methods: {
myCallback(event){
alert('Clicked button: ' + event.target.id)
}
}
}
Vue.createApp(App).mount('#app')#app { line-height: 1.75; }
[v-cloak] { display: none; }<div id = "app" v-cloak>
<my-comp @click = "myCallback"></my-comp>
</div>
<script src = "https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
Можете ли вы подробнее рассказать о том, чего вы пытаетесь достичь?