Vue.js 绑定(bind)到名称中带有点的 DOM 自定义事件(如引导事件)

Question

使用 Vue 2.1.10

我可以使用 v-on 指令绑定(bind)到 DOM 事件。例如:

v-on:click

要绑定(bind)到 DOM，请单击。但我不知道如何绑定(bind)到名称中带有点的事件。例如 Bootstrap 中的“show.bs.modal”。

目前，我在 created 钩子(Hook)中使用了一个变通绑定(bind)与常规 DOM 方法，但我真的很想为此使用声明性语法。如何实现？谢谢

编辑:问题是关于允许的语法:我怎样才能做这样的事情:

Vue.component('comp',{
  template:'<div v-on:show.bs.modal="sunrise"></div',
  methods:{
    sunrise:function(e){

     }

   }
})

Answer 1

我在处理旧项目时遇到了同样的问题。

幸运的是我在这里找到了答案:vue2 doc

<!-- object syntax (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

这适用于带有 Vue 2.16.14 的 Bootstrap 5.1.1:

<div class="modal" v-on="{ 'hide.bs.modal': handleModalClose }">
...
</div>