I have a widget defined as:
Calculator.vue
<template>
...
</template>
<script>
export default {
data: function () {
return {
value: 0,
};
},
methods: {
...
insert() {
this.$emit('insert',Number(this.value))
},
},
};
</script>
Now I have another component that displays a Popup which includes my Calculator widget
Main.vue
<template>
...
</template>
<script>
import Calculator from "../../ui/Calculator.vue";
export default {
data: function () {
return {};
},
methods: {
openCalculator() {
this.$popup("append", {
component: Calculator,
});
},
},
};
</script>
The Popup component is a third-party component that acts as a wrapper. So I always need to include it in my App.vue:
<template>
<div id="app">
<router-view />
<VuePopupPlugin :config="popupDefaultConfig" />
</div>
</template>
<script>
import Vue from "vue";
import CiaoVuePopup from "ciao-vue-popup";
Vue.use(CiaoVuePopup);
export default {
name: "app",
...
};
</script>
How can I manage the 'insert' event of the displayed Calculator from my Main component?