Question

我有3个components

Stage
StageComponent
StageElementComponent

Stage包含所有3 components的默认数据和基本控件。

我StageComponent过滤了StageElementComponent元素，并在其中进行了一些设计，验证和用户交互。

StageElementComponent显示和基于用户选择的元素。

需要考虑的事情

我想知道是否可以在emit组件中从StageElementComponent和listen到Stage的事件吗？喜欢

<template>
    //StageElementComponent
    <div class="element d-flex flex-column justify-content-center"
        @dblclick="clear">
        <i class="material-icons" v-if="element" :class="[`bg-${element.type.color}`]">{{ element.type.icon }}</i>
    </div>
</template>
<script>
    export default {
        props : {
            element : {
                type : Object,
                required : true
            }
        },
        methods : {
            clear : function($event) {
                this.$emit('clear', {
                    index : this.element.index
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .element {
        cursor: pointer;
    }
</style>

，并在Stage组件中以类似方式听

<v-stage id="ticktr" class="section center" 
    :rows="height" 
    :columns="width" 
    :elements="elements"
    @clear="clearElement"></v-stage>

我确实需要这三个组成部分。

我不想像在重复自己一样在StageComponent中听和发声

我不想使用$root.$emit。

有可能这样做吗？怎么样？

如何从Vue的子组件中监听事件？

0 个答案: