请教一下VUE2的事件问题

// 子组件 alert.vue

<template>
<div class="alert" v-if="show" @click="close">
    <slot></slot>
</div>
</template>

<script>
export default{
    data: () => ({
        show: true
    }),
    methods: {
        close (e) {
            this.$emit('change', e)
            this.show = false // 如何阻止此处触发?
        }
    }
}
</script>

// 父组件 app.vue

<template>
    <alert @change="handle">消息提示</alert>
</template>

<script>
export default{
    methods: {
        handle (e) {
            console.log(e)
            // 此处 ??
        }
    }
}
</script>

我想要的效果是,可以在父组件中可以阻止子组件内的事件触发?
不知道这样可不可以做到?

回答:

试试这样:

# Child

export default {
    props: {
        canClose: {
            type: Function,
            default: () => () => true
        },
    methods: {
        close () {
            if (this.canClose()) {
                // close
            }
        }
    }
}
# Parent
<template>
    <alert @change="handle" :can-close="canClose">消息提示</alert>
</template>

<script>
export default {
    methods: {
        canClose () {
            return false;
        }
    }
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注