Question

有人能告诉我如何正确实现父网格为App.vue并且子网格为Hello.vue的{{3}}（使用标准Webpack模板的约定）？

我已经尝试了以下但是儿童网格似乎无法正常工作。

App.vue

<template>
  <div id="app">
      <div id="top"></div>
      <div id="bottom"><router-view></router-view></div>
  </div>
</template>


<script>
 export default {
     name: 'app',

 }
</script>


<style>
#app {
    display: grid;
    grid-template-rows: 1fr 2fr;
 }
 #top {
     background: blue;
 }
 #bottom {
     background: green;
 }
</style>

Hello.vue

<template>
    <div class="hello">

        <div id="head"></div>
        <div id="tail"></div>
    </div>
</template>

 <script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
 .hello {
     display: subgrid;
     grid-template-columns: 2fr 3fr;
 }
 #head {
     background: rgba(0, 0, 0, 0.5);
 }
 #tail {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
     background: rgba(250, 250, 250, 0.5);
 }
</style>

修改：我已经为孩子的显示属性尝试了grid和subgrid，但都无效。

这是路由器定义：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
      {
          path: '/',
          name: 'Hello',
          component: Hello
      }
  ]
})

带有单文件Vue组件的嵌套CSS网格

0 个答案: