vue 2 @click 在子組件中

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單擊處理程序不起作用。 當我移動此事件時，一個組件升級也不起作用。

這很奇怪，因為我以前在 child 中使用過 event。

該組件循環顯示

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

我還為組件測試了@click.native，但它不起作用。 感謝您的任何提示。

Answer 1

在PlusIconComponent內部，在您的clickHandler方法中，您應該向組件的父傳遞參數發出一些事件，例如：

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

這就是子組件與其父組件通信的方式。 更多信息在這里