Tak jak w opisie. Jestem podczas migracji aplikacji z vue 2 na vue 3. W vue 2 mieliśmy coś takiego :
<some-component v-on:click.native="someEventHandler"> </some-component>
W wersji 3 modyfikator native przeszedł do lamusa i dlatego usunąłem w swych komponentach ów zapis.
Mam np taki kod.
<button-close
v-on:click="hideCategories"
class="panel-bar__close-button"></button-close>
hideCategories(){alert('event odpalony'); return 0;}
Oczywiście <button-close> to mój komponent .Teoretycznie jest to zgodne z oficjalną instrukcją. W wersji 3 wszystkie eventy które nie są podawane w opcji emit komponentu są traktowane jako natywne eventy.
https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.html#_2-x-syntax
Problem polega na tym, że to nie działa, handler nie jest podczepiany, alert się nie wyświetla. Co ciekawe gdy zrobimy coś takiego :
<button
v-on:click="hideCategories"
class="panel-bar__close-button"
></button>
Czyli użyjemy zwykłego html'a wszystko działa poprawnie.
Dodam też, że ów komponent jest rejestrowany globalnie, występuje na każdej podstronie - poniższy fragment kodu jest dołączany do każdego skryptu konkretnej podstrony wygląda to tak :
export default {
registerBasicComponents(app) {
app.component('authenticated-user-sidebar', AuthenticatedUserSidebar);
app.component('navbar', Navbar);
app.component('text-input-combo', TextInputCombo);
app.component('submit-button', SubmitButton);
app.component('phantom-button', PhantomButton);
app.component('labeled-checkbox', LabeledCheckbox);
app.component('button-close', ButtonClose);
app.component('empire-logo', EmpireLogo);
app.component('content-sidebar', ContentSidebar);
}
};
I na stronie głównej gdzie się obecnie znajduję i walczę :
const settings = {
data() {
return {
};
},
methods: {
showCategories(){
EventBus.$emit('showMoviesCategories');
}
}
};
const app = Vue.createApp(settings);
BasicElements.registerBasicComponents(app);
app.component('smile-in-glasses-icon', SmileInGlassesIcon);
app.component('rocket-launch-icon', RocketLaunchIcon);
app.component('star-full-icon', StarFullIcon);
app.component('video-playlist-icon', VideoPlaylistIcon);
app.component('magnifier-icon', MagnifierIcon);
app.component('add-file-icon', AddFileIcon);
app.mount("#app");
Dla pewności dodam sam kod komponentu - usunąłem css
<template>
<button v-bind:title="translations['title']" type="button" class="button-close">
<div class="button-close__cross"></div>
<span v-text="translations['label']" class="button-close__label"></span>
</button>
</template>
<script lang="ts">
import { Vue, Options } from "vue-property-decorator";
import Translations from "@jsmodules/translations/components/form_controls/button_close";
@Options({ name: "ButtonClose" })
export default class ButtonClose extends Vue {
private translations = Translations;
}
</script>
Walczę z tym od kilku godzin i skończyły mi się pomysły. Teoretycznie niby wszytko jest O.K a i tak nie działa.