Vue中通过条件渲染移除父div并显示PopUp组件的实现疑问

你只需要直接给.parent容器绑定v-if，再搭配v-else控制子组件渲染即可，v-if作用在父元素时会自动控制该元素及全部内部子元素的渲染状态，不需要单独给内部元素绑定指令。

修改后的完整父组件代码 #

<template>
    <div>
        <h1>header</h1>
        <!-- v-if直接绑定到parent容器，为false时整个容器及内部元素都会被移除 -->
        <div class="parent" v-if="userinput">
            <h2>infos</h2>
            <button>x</button>
        </div>
        <!-- v-else对应同级元素，userinput为false时自动渲染 -->
        <PopUp v-else />
    </div>
</template>

<script>
import PopUp from './PopUp.vue';

export default {
    components: {
        PopUp // 注册引入的子组件，才能在template中使用
    },
    data() {
        return {
            userinput: true,
        }
    }
}
</script>

可选拓展：实现PopUp关闭逻辑 #

如果需要点击PopUp的关闭按钮切回原页面，可以按如下修改：

1. 子组件PopUp绑定点击事件，触发自定义事件通知父组件：

<template>
    <div>
        <button @click="$emit('close')">x</button>
        <p>errorMessage</p>
    </div>
</template>

2. 父组件中监听自定义事件，修改userinput的值即可：

<PopUp v-else @close="userinput = true" />

内容的提问来源于stack exchange，提问作者herbert mühlex