Vue.JS-收听单击组件

我对Vue.JS还比较陌生,目前在侦听组件上的单击事件时遇到了问题。

JS公司:

Vue.component('photo-option', {
    data: function () {
        return {
            count: 0
        }
    },
    props: ['src'],
    template: `
    <img :src=src v-on:click="$emit('my-event')" />
    `
});

HTML格式:

<photo-option :src=uri v-for='uri in aboutUsPhotos' v-on:my-event="foo" />

…在哪里 foo 是我的主Vue实例上的一个方法。

the Vue.JS docs for handling component events ,我看不出我做错了什么。警报不会触发,控制台中也没有错误。

在我找到这些文档之前,我还尝试简单地添加 v-on:click='...' 无论是JS(即模板)还是HTML,都没有成功。

我做错什么了?

[编辑]

Vue是否有任何方法允许这样做,也许是通过在元素上“重新初始化”自己,或者什么的?