Javascript Vue.js向组件添加函数

我正在使用Vue.js，我想向我的组件Map.Vue添加一个函数，因此当我单击按钮时，它会调用同一文件中声明的函数：

<template>
  <div>
    <div class="google-map" :id="mapName">
    </div>
    <button >Do stuff</button>  
  </div>
</template>

做事

---

我只看到在App.vue中声明函数的示例。如何在my Map.vue文件中执行此操作？

事件

App.vue

和

Map.vue

都是组件，因此它们在调用“同一文件中”的函数（方法）时的工作方式相同（）

通过添加

v-on:click=“yourFunctionHere（）”

触发函数，然后确保在脚本部分的

方法

对象中声明函数：

Map.vue

App.vue

从“./components/Map”导入映射
导出默认值{
组成部分：{
地图
},
方法：{
父对象（值）{
警报（值）
}
}
}

使用

$emit（eventName）

在子单击方法中触发事件，并使用

$on（eventName）

在父单击方法中侦听事件。关于亲子沟通可能会有帮助。谢谢！对我来说，这是第一种情况，只是从同一个组件调用一个函数。工作起来很有魅力。

<template>
  <div>
    <div class="google-map" :id="mapName">
    </div>
    <button v-on:click="doStuff()">Do stuff</button>  
  </div>
</template>

<script>
  export default {
    methods: {
      doStuff () {
        alert('Did something!')
      }
    }
  }
</script>

<template>
  <div>
    <div class="google-map" :id="mapName">
    </div>
    <button v-on:click="doStuff()">Do stuff</button>  
  </div>
</template>

<script>
  export default {
    methods: {
      doStuff () {
        this.$emit('childStuff', 'some value from child')
      }
    }
  }
</script>

<template>
  <div>
    <Map v-on:childStuff="value => { parentStuff(value) }"></Map>
  </div>
</template>

<script>
  import Map from './components/Map'

  export default {
    components: {
      Map
    },

    methods: {
      parentStuff (value) {
        alert(value)
      }
    }
  }
</script>