Question

是否有一种方法可以防止在生命周期挂钩期间创建组件？例如：

beforeCreated() {
    //checking value from vuex store
    if (this.$store.state.attendeesCount >= this.$store.state.maxAttendees) {
        //prevent further propagation, don't create an instance of component
    }
}

这种情况是，我有一个父组件，其中有多个子组件，这些子组件包含用于创建与会者的表单（1个组件= 1个与会者）。如果研讨会已满员，我想阻止创建子组件。

更新：父组件是许多多行表单组件的基础组件，我不想在那里进行检查以使其尽可能抽象。

Answer 1

在条件满足时，我发出了自定义事件，而不是实际上防止在生命周期挂钩期间创建子组件。父组件侦听此自定义事件，并删除子组件实例。

孩子：

beforeCreate() {
    if (this.$store.state.attendeesCount >= 
    this.$store.state.maxAttendees) {
        this.$emit('preventCreation', {message: 'No more places'})
    }
}

父母：

<template>
    <component v-for="(item, index) in components"
         @preventCreation="preventCreation(index, $event)"
    ...
    >
    </component>
...
</template>
...
methods(){
    preventCreation(index, payload){
        this.components.splice(index, 1)
        alert(payload.msg)
    }
}

Vue生命周期挂钩-有条件地阻止创建

1 个答案: