Question

为了能够在所有情况下发出事件并监听这些事件，我这样做：

window.Event = new Vue();

然后在Vue组件的模板中发出事件“ isSelected”，就像这样，

Vue.component('artikel',{
    template: '<li style="list-style-type:none;"><input @click="isSelected" type="checkbox" class="kryssruta" /><slot></slot></li>',

    methods:{
      isSelected(){
        Event.$emit('isSelected');
      }
    }

});

现在在另一个组件中，我监听事件（我删除了除按钮之外的所有内容）：

Vue.component('modal', {
  template: `
          <button class="button" :class="{grey:toggle}">Lägg till</button>
  `,

  data(){
    return{
      toggle: true
    }
  },

  created(){
    Event.$on('isSelected', function() {
      alert('works!');
      this.toggle = false;
    })
  },

在created（）函数中，我侦听该事件，并且可以通过alert函数确认接收到该事件。

我的问题是我不知道如何使用事件来切换按钮的类。有人吗？

编辑：感谢短裙的注释，它现在可以使用箭头功能，如下所示：

  created(){
Event.$on('isSelected', () =>  this.toggle=!this.toggle);
  },

但是据我了解，IE不支持箭头功能，因此我也想弄清楚如何使用约书亚·明克勒（Joshua Minkler）关于.bind（this）的建议，但我无法使它起作用。我得到“未定义切换”。

  created(){
    Event.$on('isSelected', function() {
      toggle.bind(this) = true;
    })

将一个Vue组件模板中的类绑定到另一个Vue组件发出的Window事件

0 个答案: