javascript - 从父组件执行子(组件)函数

Question

为了避免这种情况变得困惑，并使用“原生”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>

如果您要生成动态数量的 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>