Vue.js 给组件添加函数

Question

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

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

我只见过在 App.vue 中声明函数的例子。你如何在我的 Map.vue 文件中做到这一点？

Answer 1

活动

双方App.vue并Map.vue因此他们的工作一样调用函数（方法）“在同一个文件”（是组件单个文件组件）。

通过添加触发事件v-on:click="yourFunctionHere()"，然后确保methods在脚本部分的对象中声明您的函数：

地图.vue

<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>

自定义事件

由于有点不清楚是什么让您对子组件感到困惑Map.vue（因为您了解父组件App.vue），也许您正在询问如何App.vue从子组件中的按钮调用函数Map.vue？

如果是这种情况，那么您需要使用自定义事件进行子级到父级的通信：

地图.vue

<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>