Захват дочерних компонентов испущенного действия

Question

Я пытаюсь отреагировать на действие дочерних компонентов. Дочерний элемент генерирует событие / триггер / действие с именем init. Я пытаюсь зарегистрироваться для этого события в моих родительских компонентах events map. Но обратный вызов никогда не срабатывает, что заставляет меня думать, что я неправильно зарегистрировался для отправленного действия.

Как я могу реагировать на то, что ребенок вызвал событие / триггер / действие?

<template>
    <flickity v-if="caseStudies && caseStudies.length > 0" id="case--studies_slider"ref="flickity" :options="flickityOptions">
        <div v-for="cs in caseStudies">
            {{cs.title}}
        </div>
    </flickity>
</template>

<script type="text/javascript">

import Flickity from 'vue-flickity' 

// NOTE computed properties (caseStudies) has been removed for brevity
// but I confirm that it does load with more than 1 element in the array

export default {

    components: {
        'Flickity': Flickity,  // Upon initialisation this should emit 'init'
    },

    data() {
        return {
            flickityOptions: {
              prevNextButtons: false,
            }
        }
    },

    events: {
      // This never fires!
      init() {
        console.log(foo)

        this.$refs.flickity.on('dragStart', (ev, pointer) => {
            $('#case--studies_slider').addClass('is-dragging')
        })

        this.$refs.flickity.on('dragEnd', (ev, pointer) => {
            $('#case--studies_slider').removeClass('is-dragging')
        })
      }
    },

    mounted() {

        // The below code causes a runtime error 'this.$refs.flickity' is undefined
        this.$refs.flickity.on('dragStart', (ev, pointer) => {
            $('#case--studies_slider').addClass('is-dragging')
        })

        this.$refs.flickity.on('dragEnd', (ev, pointer) => {
            $('#case--studies_slider').removeClass('is-dragging')
        })
    }
}
</script>

Answer 1

Вам нужно будет связать дочернее событие с родительским через v-on:

<template>
    <flickity v-if="caseStudies && caseStudies.length > 0" id="case-- 
    studies_slider"ref="flickity" :options="flickityOptions"
    v-on:init="doSomething()">
        <div v-for="cs in caseStudies">
            {{cs.title}}
        </div>
    </flickity>
</template>

<script type="text/javascript">

import Flickity from 'vue-flickity' 

export default {

    components: {
        'Flickity': Flickity,
    },

    data() {
        return {
            flickityOptions: {
              prevNextButtons: false,
            }
        }
    },
    methods: {
        doSomething() {
            // this will be called when the 'init' event is triggered
        }
    },
}
</script>