如何在Vue的父组件中放置子组件?

时间:2018-06-22 16:08:23

标签: vue.js vuetify.js

也许这个问题令人困惑,但是我想将Vuetify <v-select></v-select>放在<v-toolbar></v-toolbar>中。整个菜单和工具栏位于App.vue(父项)中。我希望它是这样的: enter image description here

v-select位于父组件中,因为我想向您展示它的外观,但是我想在子组件中使用该组件并将其放置在<v-toolbar>中。

在App.vue中,对于这样的任何子组件,我都有一个<router-view></router-view>

    <v-toolbar :clipped-left="$vuetify.breakpoint.lgAndUp" color="secondary" dark app fixed>
      <v-toolbar-title style="width: 15%" class="">
        <v-toolbar-side-icon class="p-right-2" @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <v-tooltip bottom>
        <span slot="activator" class="hidden-sm-and-down">Catálogo de Cuentas</span>  
        <span>Catálogo de Cuentas</span>
        </v-tooltip>       
      </v-toolbar-title>
      <v-select flat solo-inverted prepend-icon="filter_list" label="Cuentas"></v-select>

</v-toolbar>
<router-view></router-view>
.....

一个子组件的内容如下:

    <template>
<v-app dark>
<v-content>
<v-container>
    <v-data-table></v-data-table>
</v-container>
</v-content>
</v-app>
</template>

enter image description here

因此,如何将子组件的v-select放置在父工具栏组件中。

0 个答案:

没有答案