跨组件验证网格：子列中的列可以作为父列中的列吗？

Question

对于我的应用程序的特定布局，仅当满足条件时，我才需要在某些 v 行内显示某些列。

条件每次都相同，为了避免在 v-col 之后重写 v-col，我决定编写一个组件，其中包含要在行内显示的三列 I。我们的想法是像这样使用它：

                 <v-row justify="start">
                    <v-col cols="12" md="2">
                      <!-- My first column, that's always here... -->
                    </v-col>
                    <MyComponent v-if="myCondition" :data="myData"/>
                  </v-row>

反过来，MyComponent 看起来像这样：

<template>
 <span>
  <v-col cols="12" md="4">
    <!-- stuff -->
  </v-col>
  <v-col cols="12" md="2">
    <!-- stuff -->
  </v-col>      
  <v-col cols="12" md="4">
    <!-- stuff -->
  </v-col>
</span>

然而，在呈现此代码时，Vuetify 将整个 MyComponent 视为单个列的一部分，因此将其全部压缩显示。我期望它能正确呈现所有列，并有一个完整的行。

有什么方法可以解决这个问题吗？

Answer 1

这里的问题是跨度标签。列需要是行的直接子项。我会将这三列移出组件并移回您的主要组件，然后将这三列包装在带有 v-if

的模板标签中

<v-row justify="start">
  <v-col cols="12" md="2">
    <!-- My first column, that's always here... -->
  </v-col>
  <template v-if="myCondition">
    <v-col cols="12" md="4"></v-col>
    <v-col cols="12" md="4"></v-col>
    <v-col cols="12" md="4"></v-col>
  </template>
</v-row>

或者如您所述。您可以在子组件中使用 v-row 作为根元素

父组件

<v-row justify="start">
  <v-col cols="12" md="2">
    <!-- My first column, that's always here... -->
  </v-col>
  <v-col v-if="myCondition" cols="12" md="10">
    <MyComponent :data="myData"/>
  </v-col>
</v-row>

子组件

<v-row>
  <v-col cols="12" md="4"></v-col>
  <v-col cols="12" md="4"></v-col>
  <v-col cols="12" md="4"></v-col>
</v-row>

跨组件验证网格：子列中的列可以作为父列中的列吗？

Vuetify grid across components: can columns in children behave as columns in parent?

vue.js

vuejs2

vuetify.js