title: How to call method of child component from parent component in vuejs
body: <p>I have a parent component</p>
  <pre><code>&lt;template&gt;
     ...
     &lt;dropdown-city @currentCity=&quot;updateCity&quot;&gt;&lt;/dropdown-city&gt;
     &lt;map ref=&quot;mymap&quot; @myMap=&quot;updateMap&quot;&gt;&lt;/map&gt;
     ...
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      ...
      methods: {
          updateCity(city) {
              this.city_object = city
          },
          updateMap(map) {
              this.$refs.mymap.setCenter(map)
          }
      }
      ...
  }
  &lt;/script&gt;
  </code></pre>
  <p>And two child component dropdown and map</p>
  <pre><code>&lt;template&gt;
     ...
     &lt;ul&gt;
        &lt;li
            v-for=&quot;city in states&quot;
            :key=&quot;city.id&quot;
            v-on:click=&quot;selectCity(city)&quot;
         &gt;
            {{ city.name }}
         &lt;/li&gt;
    &lt;/ul&gt;
    ...
  &lt;/template&gt;
  &lt;script&gt;
  export default {
     data: function() {
          return {
              states: [],
          };
     },
     created() {
        this.states = [{id: 1, name: &quot;New York&quot;, lat: 40.6976637, lng: -74.1197638}, {id: 2, name: &quot;Cali&quot;, lat: 36.9177291, lng: -128.550585}, {id: 3, name: &quot;Las Vegas&quot;, lat: 36.1251958, lng: -115.3150832}];
     },
     methods: {
          selectCity: function (city) {
              this.$emit('currentCity', city);
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>And child map component</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div id=&quot;mymap&quot; class=&quot;vue2leaflet-map&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      data: function() {
          return {
              mymap: &quot;&quot;,
              center_lat: 37.2756354,
              center_lng: -104.6563627,
          };
      },
      mounted() {
          var map = L.map(&quot;mymap&quot;, { fullscreenControl: !1 }).setView([this.center_lat, this.center_lng], 18);
  
          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt;'
          }).addTo(map);
  
          this.mymap = map;
          this.$emit('myMap', map);
      },
      methods: {
          setCenter: function (map) {
              console.log(&quot;setCenter&quot;);
              map.flyTo([this.city_object.lat, this.city_object.lng], 14, {animate: true, duration: 0.25, noMoveStart: true});
          },
      },
      props: {
          city_object: Object,
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>When select 1 city with lat and lng on child component dropdown, parent component can't call setCenter map in child component map</p>