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

【问题标题】：How to listen to a nested components' events in Vue如何在 Vue 中监听嵌套组件的事件
【发布时间】：2019-06-04 10:04:31
【问题描述】：

我想从 Vue chrome devtools 扩展中看到的嵌套组件中获取“输入”事件

我只能使用 v-on 指令监听 VDatePicker 上的“输入”事件。有没有办法在不扩展 VDatePicker 组件的情况下监听 VDatePickerDateTable “输入”事件？

<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>

【问题讨论】：

你试过this.$on("eventName", callback)吗？ vuejs.org/v2/api/#vm-on
应该可以，见this test
这不起作用它会产生相同的结果。
@Matt 和 eric99 我认为您的建议不起作用的原因是 Vuetify 1.2 中新增的 multiple 修饰符

标签： vue.js vuetify.js vue-events

【解决方案1】：

这就是我最终要做的。使用 VDatePicker 的引用并将其跟随到其子级的嵌套引用中，VDatePickerDateTable 以侦听其“输入”事件。我认为 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>

【讨论】：