In order to prevent any clutter and avoid using "native" jQuery/javascript, my goal is to elegantly call a function in the child component from the parent. The specific function I want to execute is change_map_data() from the child component G_Map.vue, all done in a Vue-like manner:
Parent.vue
<template>
<div class="col-md-12">
...
<i v-on:click="change_map_data">change markers</i>
...
<g-map v-bind:map_data="init_data.map"></g-map>
...
</div>
export default {
data() {
return {
init_data: {
map: {
map_ele: 'map'
}
}
}
}
}
</script>
</template>
G_Map.vue:
<template>
<div :id="map_data.map_ele" class="gmap"></div>
</template>
<script>
import init_map from '../../../assets/js/map.js';
export default {
props: ['map_data'],
methods: {
change_map_data: function() { // this function should be executed from the parent
alert();
}
}
}
</script>