vue 3有条件地包裹父元件，保留子元件

qacovj5a 于 2023-01-02 发布在 Vue.js

关注(0)|答案(1)|浏览(169)

我想有条件地 Package 父组件，而不影响chikd组件。请检查下面的例子，我到底想在vue 3

<template>
  <el-col v-if="column.length> 0" :xs="column.xs" :sm="column.sm" :lg="column.lg" :xl="column.xl">
  <el-form-item
    :prop="formItems.prop"
    :label="formItems.label"
  >
    <el-input
      v-model="props.modelValue"
      @input="$emit('update', $event)"
      :placeholder="props.placeholder"
      :type="props.type"
      :autocomplete="props.autocomplete"
      :suffix-icon="props.icon"
    />
  </el-form-item>
</el-col>
</template>

这里我想用特定的条件 Package <el-col>组件。我使用了v-if，但不起作用，因为我需要显示子元素，因为它只是想有条件地 Package 父组件<el-col>。

vue.js

来源：https://stackoverflow.com/questions/74979868/vue-3-wrap-conditionally-parent-component-keep-the-child-component

1条答案

按热度按时间

py49o6xq1#

如果要对父元素应用条件，则它也会影响其子元素。
最好将子元素移动到任何组件中，并像这样使用它-

<template>
  <!-- If condition true, wrap child elements inside parent -->
  <el-col 
    v-if="column.length> 0" 
    :xs="column.xs" 
    :sm="column.sm" 
    :lg="column.lg" 
    :xl="column.xl"
  >
    <child-elements/>
  </el-col>

  <!-- Else show child elements without wrapped -->
  <child-elements v-else/>
</template>

赞(0）回复(0）举报 2023-01-02

我来回答

vue 3有条件地包裹父元件，保留子元件

1条答案

相关问题

热门标签

最新问答