В чем разница между директивой v-on Vue и vue. $ On?

Question

Предположим, у меня есть два родственных компонента, например:

<div id="root2">
    <some-component>First</some-component>
    <some-component>Second</some-component>
</div>

... и эти компоненты определены так:

Vue.component('some-component', {
    template: '<button @click="doSomething" @somethingwasdone="this.reactToSomething" :disabled="this.isDisabled"><slot /></button>',
    methods: {
        doSomething() {
            Event.$emit('somethingWasDone');
        },

        reactToSomething() {
            this.isDisabled = true;
        }
    },
    data() {
        return {
            isDisabled: false,
        }
    },
    created() {
        Event.$on('somethingWasDone', () => this.reactToSomething());
    }
});

Предположим, моя цель - отключить обе кнопки, если любой из них нажат. Я намеренно включил два прослушивателя событий, один в форме директивы v-on, а другой в форме метода $ on, определенного для экземпляра Vue. Я не могу заставить первое работать, и я не уверен, почему.

Я предполагаю, что это должно иметь какое-то отношение к области действия сгенерированного события. Однако даже компонент, на который я нажимаю, не прослушивает событие, которое он генерирует при использовании директивы v-on. Любая помощь приветствуется!

С уважением,

Райан

---

Обновление: я обнаружил ошибку в своем коде, в которой указана директива v-for (@) слушал, было 'componentclicked' вместо 'somethingwasdone'. При исправлении ошибки заметил, что на самом деле оба метода работают.

Answer 1

Каждый экземпляр Vue (включая экземпляр root) имеет методы $ on и $ emit, которые позволяют отправлять и получать события. Имея дело с событиями, вы должны иметь в виду объем генерируемого события.

В вашем примере кажется, что вы пытаетесь сгенерировать и поймать событие в том же компоненте. Для этой цели вы захотите использовать методы $ emit и $ on экземпляра компонента. Таким образом, событие генерируется в компоненте и остается в этой области. В этом случае используется синтаксис this. $ Emit () и this. $ On (), this определяющий экземпляр компонента.

Vue.component('some-component', {
    template: '<button @click="doSomething" @somethingWasDone="this.reactToSomething" :disabled="this.isDisabled"><slot /></button>',
    methods: {
        doSomething() {
            this.$emit('somethingWasDone');
        },

        reactToSomething() {
            this.isDisabled = true;
        }
    },
    data() {
        return {
            isDisabled: false,
        }
    },
    created() {
        this.$on('somethingWasDone', () => this.reactToSomething());
    }
});

v-on - это синтаксис, используемый в шаблоне для прослушивания того же события от родительского компонента.

<div id="root2">
     <some-component v-on:somethingWasDone="doSomething">First</some-component>
    <some-component v-on:somethingWasDone="doSomething">Second</some-component>
</div>

Если вы используете root экземпляр Vue. $ On и Vue. $ Emit, вы генерируете / слушаете события на глобальном уровне.

Answer 2

Насколько я понимаю, когда вы генерируете события, они отправляются в родительский компонент. Таким образом, вам необходимо реализовать logi c в родительском компоненте.

<div id="root2">
  <some-component
    v-on:somethingWasDone="isDisabled = true"
    :disabled="isDisabled">
   First
  </some-component>

  <some-component
    v-on:somethingWasDone="isDisabled = true"
    :isDisabled="isDisabled">
   Second
  </some-component>
</div>

// ...

data() {
  return {
    isDisabled: false
  }
}

добавить переменную isDisabled к родительскому компоненту, а также как опору в some-component.

Vue.component('some-component', {
    template: '<button @click="doSomething" @componentclicked="this.reactToSomething" :disabled="this.isDisabled"><slot /></button>',
    props: ["isDisabled"],
    methods: {
        doSomething() {
            Event.$emit('somethingWasDone');
        }
    },
});