Vue.JS-听组件点击

Question

我对Vue.JS相当陌生，目前在侦听组件上的click事件时遇到问题。

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中，但都没有成功。

我在做什么错？

---

[编辑]

之所以发生这种情况，是因为该代码是由灯箱脚本提取的，并且其DOM位置已更改。因此大概是绑定/事件附件丢失了。

Vue是否有任何方法允许这样做，也许是通过在某个元素上对其自身进行“重新初始化”之类的方法？

Answer 1

当我运行您的代码时，我确实在控制台中看到一个错误，但只有在单击后才看到错误。该错误是因为您无法在alert处理程序中内联访问v-on。模板仅允许访问选定的全局白名单，而alert不是其中之一。 console都不是，所以您也不能使用它。

可用的全局变量列表在源代码中：

https://github.com/vuejs/vue/blob/6b4c0f9c89899f89a3ef258fb0599d78bef65664/src/core/instance/proxy.js#L10

而不是使用方法作为您的处理程序：

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

new Vue({
  el: '#app',
  
  data () {
    return {
      aboutUsPhotos: ['https://vuejs.org/images/logo.png']
    }
  },
  
  methods: {
    onMyEvent () {
      alert(1)
    }
  }
})

img {
  height: 40px;
  width: 40px;
  border: 1px solid red;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <photo-option
    v-for='uri in aboutUsPhotos'
    :src="uri"
    v-on:my-event="onMyEvent"
  ></photo-option>
</div>

也请注意，我已经将<photo-option>标记更改为具有单独的结束标记，而不是使用自闭合/>。您可以对字符串模板或SFC中的组件使用自动关闭标签，但如果将模板直接放在HTML文件中，除非使用单独的关闭标签，否则都会遇到问题。

Vue文档在此处有关于此的注释：

https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended