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

Posted 2023-02-22

【中文标题】Vue.js 绑定到名称中带有点的 DOM 自定义事件（如引导事件）

【英文标题】：Vue.js bind to DOM custom event with dots in name (like bootstrap events)

【发布时间】：2017-06-30 09:09:28

【问题描述】：

使用 Vue 2.1.10

我可以使用v-on 指令绑定到DOM 事件。例如：

v-on:click

绑定到 DOM 点击。 但我不知道如何绑定到名称中带有点的事件。例如引导程序中的“show.bs.modal”。

目前，我在 created 钩子中使用常规 DOM 方法的解决方法绑定，但我真的很想为此使用声明性语法。如何做到这一点？谢谢

编辑： 问题是关于允许的语法：我该怎么做：

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

     

   
)

【问题讨论】：

你所说的点是类名吗？ '.class.name'

你能在这个演示问题上抛出一个 jsfiddle 吗？

@Austio 不是“小提琴”问题，是语法问题，请参阅编辑

看到这个：github.com/vuejs/vue/issues/201 所以，应该是这样的：v-on="show.bs.modal:..." 这个很老了，不知道还能不能用，试试看。

【参考方案1】：

我认为v-on 不支持点，但您可以创建自定义指令来为该事件创建事件侦听器。

不确定是否有更简单的方法，但在下面的演示中或者这个fiddle 应该可以工作。

该演示创建了一个名称中带有点的新事件，但它也应该适用于引导事件（未经测试）。如果它不适用于引导程序，请告诉我，我会看看。

只有在您使用v-if 时才能解除绑定。如果您直接使用 javascript 删除该元素。该活动仍将在那里。

var helloEvent = new Event('demo.event.hello');

document.addEventListener('demo.event.hello', function(e) 
  // this is just for testing event dispatching!
  console.log('main event listener');
, false);

const bindCustomEvent = 
  getName: function(binding) 
    return binding.arg + '.' +
      Object.keys(binding.modifiers).map(key => key).join('.');
  ,
  bind: function(el, binding, vnode) 
    const eventName = bindCustomEvent.getName(binding);

    console.log(el, eventName);
    document.addEventListener(eventName, binding.value);
  ,
  unbind: function(el, binding) 
    const eventName = bindCustomEvent.getName(binding);
    console.log('unbinding', eventName);
    document.removeEventListener(eventName, binding.value);
  
;

Vue.directive('bindCustomEvent', bindCustomEvent);

new Vue(
  el: '#app',
  data() 
    return 
      enabled: true,
      eventMsg: ''
    ;
  ,
  methods: 
    sunrise: function(e) 
      console.log('received event');
      this.eventMsg = 'received event';
    ,
    testEvent: function() 
      document.dispatchEvent(helloEvent);
    ,
    toggle: function() 
      console.log('toggle', this.enabled);
      this.enabled = !this.enabled;

      if (!this.enabled) 
        this.eventMsg = '';
      
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <div v-bind-custom-event:demo.event.hello="sunrise" v-if="enabled">
    Hello, eventMsg
  </div>

  <!--
  The following markup is not working
  <div v-on="demo.event.hello:sunrise" v-if="enabled">
    Hello, eventMsg
  </div>-->
  <button @click="testEvent()">
    Change
  </button>
  <button @click="toggle">
    <span v-if="enabled">disable custom event</span>
    <span v-else>enable custom event</span>
  </button>
</div>

【参考方案2】：

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

幸运的是我在这里找到了答案：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>