Использование имен событий, хранящихся в переменной в VueJs - PullRequest
Новая
       45

Использование имен событий, хранящихся в переменной в VueJs

0 голосов
/ 11 октября 2018

В VueJS дочерний компонент может генерировать событие, например: 

this.$emit('toggle-button')

В родительском элементе мы можем прослушивать это событие следующим образом: 

<my-component v-on:toggle-button="doSomething"></my-component>

Это работаетотличный.Но у меня есть требование, чтобы имя события (в данном случае кнопка переключения) сохранялось в переменной или хранилище Vuex.Итак, у меня нет точного имени события, но есть переменная или хранилище с именем события.

В таком случае, какой будет синтаксис для ссылки на это имя события в директиве on-click?

Например, допустим, у нас есть: 

let eventName = 'toggle-button'

Как я могу использовать эту переменную (eventName) вместо точного имени события (кнопка-переключатель) в следующем: 

<my-component v-on:toggle-button="doSomething"></my-component>

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Если вы визуализируете свой компонент с использованием отдельной функции визуализации , это легко: 

export default {
    props: {
        eventName: {
            type: String,
        },
    },
    render: function (createElement) {
        return createElement('my-component', {
            on: {
                [this.eventName]: (event) => {
                    console.log('Received event!')
                }
            }
        })
    }
}

Функции визуализации также имеют возможность динамически указывать имя для компонента, если этотакже требуется для вашего приложения

0 голосов
/ 11 октября 2018

Вы можете использовать $on(EVENT_NAME, CALLBACK) в этом случае: 

// <my-component ref="foo" />
this.$refs.foo.$on(eventName, doSomething)


Vue.component('my-component', {
  template: `<button @click="$emit('click', $event)">Click</button>`
});

new Vue({
  el: '#app',
  mounted() {
    const eventName = 'click';
    this.$refs.foo.$on(eventName, this.doSomething);
  },
  methods: {
    doSomething() {
      alert('clicked');
    }
  }
})
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <my-component ref="foo" />
</div>
...