从父组件

Question

为了避免这种混乱和使用＆＃34; native＆＃34; jQuery / javascript我想在父组件的子组件中调用一个函数，我想要以一种优雅的方式从孩子change_map_data()执行G_Map.vue的函数，vueish方式：

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() { // want to execute this from parent
            alert();
        }
    }
}
</script>

Answer 1

如果要从父组件调用子组件上定义的方法，则必须获得对子组件的引用并直接调用其方法：

<i v-on:click="$refs.map.change_map_data()">change markers</i>
<g-map v-bind:map_data="init_data.map" ref="map"></g-map>

如果您要生成动态数量的地图，那么您需要执行以下操作：

<div v-for="map, i of maps">
  <i v-on:click="$refs.map[i].change_map_data()">change markers</i>
  <g-map v-bind:map_data="map" ref="map"></g-map>
</div>