Vue.js 绑定到名称中带有点的 DOM 自定义事件(如引导事件) [英] Vue.js bind to DOM custom event with dots in name (like bootstrap events)

问题描述

使用 Vue 2.1.10

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

v-on:click

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

目前，我在带有常规 DOM 方法的 created 钩子中使用变通方法绑定，但我真的想为此使用声明性语法.如何做到这一点?谢谢

问题是关于允许的语法:我该怎么做:

Vue.component('comp',{模板:'<div v-on:show.bs.modal="sunrise"></div',方法:{日出:功能(e){}}})

解决方案

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

不确定是否有更简单的东西，但类似于下面的演示或这个 fiddle 应该工作.

该演示创建了一个名称中带有点的新事件，但它也适用于引导程序事件(未测试).如果它不能与引导程序一起使用，请告诉我，我会看看.

解除绑定仅在您使用 v-if 时有效.如果您直接使用 Javascript 删除该元素.该活动仍将在那里.

var helloEvent = new Event('demo.event.hello');document.addEventListener('demo.event.hello', function(e) {//这只是为了测试事件调度！console.log('主事件监听器');}， 错误的);const bindCustomEvent = {获取名称:函数(绑定){返回 binding.arg + '.'+Object.keys(binding.modifiers).map(key => key).join('.');},绑定:函数(el，绑定，vnode){const eventName = bindCustomEvent.getName(binding);console.log(el, eventName);document.addEventListener(eventName, binding.value);},解除绑定:函数(el，绑定){const eventName = bindCustomEvent.getName(binding);console.log('unbinding', eventName);document.removeEventListener(eventName, binding.value);}};Vue.directive('bindCustomEvent', bindCustomEvent);新的 Vue({el: '#app',数据() {返回 {启用:真，事件消息:''};},方法: {日出:功能(e){console.log('收到事件');this.eventMsg = '收到事件';},测试事件:函数(){document.dispatchEvent(helloEvent);},切换:函数(){console.log('toggle', this.enabled);this.enabled = !this.enabled;如果(！this.enabled){this.eventMsg = '';}}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script><div id="应用程序"><div v-bind-custom-event:demo.event.hello="sunrise" v-if="en​​abled">你好，{{eventMsg}}

<!--以下标记不起作用<div v-on="demo.event.hello:sunrise" v-if="en​​abled">你好，{{eventMsg}}</div>--><按钮@click="testEvent()">改变<按钮@click="toggle"><span v-if="en​​abled">禁用自定义事件</span><span v-else>启用自定义事件</span>

Using Vue 2.1.10

I can bind to DOM events with v-on directive. For example:

v-on:click

To bind to DOM click. But I can't figure how to bind to an event that has dots in the name. such as "show.bs.modal" from bootstrap.

Currently, I use a workaround binding in the created hook with Regular DOM Methods, but I really would like to use the declarative syntax for that. How can this be achieved? thanks

EDIT: The question is about allowed syntax: how can I do something like:

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

     }

   }
})

解决方案

I think dots are not supported in v-on but you could create a custom directive to create an event listener for that event.

Not sure if there is something easier but something like in the demo below or this fiddle should work.

The demo creates a new event with dots in name but that should also work with bootstrap events (not tested). Please let me know if it's not working with bootstrap and I'll have a look.

Unbinding only works if you're using v-if. If you're removing that element with Javascript directly. The event will still be there.

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>

这篇关于Vue.js 绑定到名称中带有点的 DOM 自定义事件(如引导事件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！