vue3组件无根节点时v-show=false不生效

最新推荐文章于 2024-05-22 09:10:59 发布

尘寰ya

最新推荐文章于 2024-05-22 09:10:59 发布

阅读量2.3k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44165941/article/details/126519878

版权

在子组件上使用v-show时，子组件无根节点，v-show=false仍会显示子组件。从控制台能够看到段落节点无根节点，并且没有 display: none;

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <Child v-show="false" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, defineProps, defineEmits } from 'vue';
  import Child from './child.vue';
</script>

<style lang="scss" scoped></style>

<template>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, defineProps, defineEmits } from 'vue';
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

为子组件添加根节点后

<template>
  <div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, defineProps, defineEmits } from "vue";
</script>

<style lang="scss" scoped></style>