vue.js - 如何在 Vue 中监听嵌套组件的事件

Question

我想从 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>

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