如何在Vue中监听嵌套组件的事件

Question

我想从嵌套组件中获取一个“ input”事件，我看到它是从Vue chrome devtools扩展中触发的

我只能使用v-on指令在 VDatePicker 上监听“ input”事件。有没有一种方法可以监听 VDatePickerDateTable “输入”事件，而无需扩展 VDatePicker 组件？

<template>
    <v-date-picker v-model="selectedDays" multiple @input="onDayClick"/>
</template>

<script>
    export default {
        methods:{
            onDateClick(data){
                console.log(data); // ["2019-01-01", "2019-01-02", "2019-01-06"]
            }
        }
    }
</script>

Answer 1

这就是我最终要做的。使用对 VDatePicker 的引用，并将其跟随其子元素的嵌套引用 VDatePickerDateTable ，以侦听其“ input”事件。我认为 VDatePicker 上的输入传递日期字符串数组的原因是，它是由组件上的 multiple 属性定义的多日期选择器。这已添加到Vuetify 1.2中。

现在它将单击日期传递给处理程序。我想知道是否有人有更好的方法。

<template>
    <v-date-picker ref="datePicker" v-model="selectedDays" multiple/>
</template>

<script>
export default {
    mounted(){
            this.$refs.datePicker.$refs.table.$on('input', this.onDayClick);
    },
    methods: {
        onDateClick(data) {
            console.log(data); // "2019-01-01"
        }
    }
};
</script>