How to call method of child component from parent component in vuejs

Question

I have a parent component

<template>
   ...
   <dropdown-city @currentCity="updateCity"></dropdown-city>
   <map ref="mymap" @myMap="updateMap"></map>
   ...
</template>
<script>
export default {
    ...
    methods: {
        updateCity(city) {
            this.city_object = city
        },
        updateMap(map) {
            this.$refs.mymap.setCenter(map)
        }
    }
    ...
}
</script>

And two child component dropdown and map

<template>
   ...
   <ul>
      <li
          v-for="city in states"
          :key="city.id"
          v-on:click="selectCity(city)"
       >
          {{ city.name }}
       </li>
  </ul>
  ...
</template>
<script>
export default {
   data: function() {
        return {
            states: [],
        };
   },
   created() {
      this.states = [{id: 1, name: "New York", lat: 40.6976637, lng: -74.1197638}, {id: 2, name: "Cali", lat: 36.9177291, lng: -128.550585}, {id: 3, name: "Las Vegas", lat: 36.1251958, lng: -115.3150832}];
   },
   methods: {
        selectCity: function (city) {
            this.$emit('currentCity', city);
        },
    },
}
</script>

And child map component

<template>
    <div>
        <div id="mymap" class="vue2leaflet-map"></div>
    </div>
</template>
<script>
export default {
    data: function() {
        return {
            mymap: "",
            center_lat: 37.2756354,
            center_lng: -104.6563627,
        };
    },
    mounted() {
        var map = L.map("mymap", { fullscreenControl: !1 }).setView([this.center_lat, this.center_lng], 18);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

        this.mymap = map;
        this.$emit('myMap', map);
    },
    methods: {
        setCenter: function (map) {
            console.log("setCenter");
            map.flyTo([this.city_object.lat, this.city_object.lng], 14, {animate: true, duration: 0.25, noMoveStart: true});
        },
    },
    props: {
        city_object: Object,
    },
}
</script>

When select 1 city with lat and lng on child component dropdown, parent component can't call setCenter map in child component map

Take a look at this answer. https://stackoverflow.com/a/47565763/2307934 — edg, Aug 05 '22 at 06:07
Instead of the emit statement, why can't you directly call `setCenter`? — Amaarockz, Aug 05 '22 at 06:30

score 0 · Answer 1 · answered Aug 05 '22 at 06:09

Maybe this gives some insight.

Childs:
1-On the child component you can pass a props (within the export default),ie props: ["myprop"]
2-Watch myprop value and execute whatever you want
3-In the child component register the prop and the method on #2
Parent:
4-In parent component you create the <ChildComponent :myprop="trigger"
5-Lastly on the parent iniside data return the trigger value (0 as a simple example).

Good luck.

How to call method of child component from parent component in vuejs

1 Answers1