Пользовательские события Vue.js от констант - PullRequest
Новая
       8

Пользовательские события Vue.js от констант

0 голосов
/ 04 октября 2019

У меня есть компонент Vue.js, который публикует определенные события. 

<MyComponent @some-event="myHandler"/>

Внутри компонента у вас есть что-то вроде 

this.$emit('some-event', someData);

Довольно просто. Но чтобы сделать код чище, было бы неплохо, если бы я мог где-то определить строку 'some-event' в константе и иметь возможность использовать ее с $emit() и при объявлении обработчика события. Примерно так: 

const EVENT_NAME = 'some-event';

this.emit(EVENT_NAME, someData);

<MyComponent @{{EVENT_NAME}}="myHandler"/>

Я только что составил синтаксис @{{EVENT_NAME}}, но, надеюсь, идея имеет смысл. Это возможно?

1 Ответ

1 голос
/ 04 октября 2019

Вы можете использовать Динамические аргументы , например (будучи event_name константой): 

<MyComponent @[event_name]="myHandler" />

, но с некоторыми оговорками:

  • Есть несколько ограничений к тому, что вы можете использовать внутри [];
  • Чтобы константа event_name использовалась в шаблоне, она должна быть доступна для шаблона , что означает, что это должно быть data свойство, вычисляемое или подобное. Недостаточно просто объявить в скрипте вне компонента vue.
  • Атрибуты будут анализироваться как строчные, поэтому ваша константа должна быть event_name, а не EVENT_NAME или Event_Name (выМожно даже использовать их, но они будут рассматриваться как event_name; посмотрите, как я объявил data ниже).

Рабочая демонстрация: 

const EVENT_NAME = 'some-event';

Vue.component(`my-component`, {
  template: `
    <button @click="myCompInternalHandler">click me to emit an event whose name is the value of event_name</button>
  `,
  methods: {
    myCompInternalHandler() {
      this.$emit(EVENT_NAME, {someData: 112233});
    }
  }
});

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    event_name: EVENT_NAME // key has to be lowercase, because it is used in the template as dynamic attr
  },
  methods: {
    myHandler(e) {
      console.log('received at parent:', e);
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-component @[event_name]="myHandler" />
  <p>{{ message }}</p>
</div>
...