Question

我的组件很简单

<template>
    <span @click="clickHandler" :class="className"></span>
</template>
<script>
    export default {
        name: "PlusIconComponent",
        props: {
            gender: {
                type: String,
                required: true
            },
            part: {
                type: String,
                required: true
            },
            opened: {
                type: Boolean,
                required: true
            }
        },
        data(){
            return {}
        },
        methods: {
            clickHandler(){
                console.log('clicked', this.part)
            }
        },
        computed: {
            className(){
                let classes = ['plus-icon', this.part, this.gender]
                if(this.opened){
                    classes.push('opened')
                }
                return classes.join(' ')                
            }
        }        

    }
</script>

此组件位于根组件内部，该组件依赖于变量来显示不同形式的组件（并为它们使用保持活动状态）。在这些组件之一中，我使用了PlusIconComponent，点击处理程序不起作用。当我移动此事件时，一个组件也无法升级。

这很奇怪，因为我以前在孩子中使用过事件。

此组件循环显示

<PlusIconComponent :key="part" v-for="part in parts" :part="part" :gender="gender" :opened="(showPart===part)" />

我也测试了该组件的@ click.native，但是它不起作用。感谢您的提示。

Answer 1

在PlusIconComponent内的clickHandler方法中，您应该向组件的父passaing参数发出一些事件，例如：

clickHandler(){
   this.$emit('clicked', this.part)
}

另一方面，在您的父级中，您应该使用另一个处理程序来捕获此事件，该处理程序的名称与孩子发出的名称相同：

<PlusIconComponent :key="part" v-for="part in parts" :part="part" :gender="gender" :opened="(showPart===part)" @clicked="parentsHandler" />

最后，您可以在父级中实现所需的内容

parentsHandler(part) {
   console.log('parent says: ', part)
}

这是子组件与其父组件通信的方式。更多信息here

vue 2 @单击子组件

1 个答案: