父组件已经引入子组件并注册，为什么父组件不显示子组件？

  • Z时代
  • 2024-02-24
  • 分类：IT

路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 父组件引入
import HomeView from '@/views/HomeView.vue'
import QualityAna from '@/views/QualityAna.vue'
import ManuProMan from '@/views/ManuProMan.vue'
import PalletMan from '@/views/PalletMan.vue'
import WorkOrderMan from '@/views/WorkOrderMan.vue'
import KanBanMan from '@/views/KanBanMan.vue'
import TraceMan from '@/views/TraceMan.vue'
Vue.use(VueRouter)
const routes = [
  { path: '/', redirect: '/homeview' },
  {
    path: '/homeview',
    component: HomeView,
    child: [
      { path: '/qualityana', component: QualityAna },
      { path: '/manuproman', component: ManuProMan },
      { path: '/palletman', component: PalletMan },
      { path: '/workorderman', component: WorkOrderMan },
      { path: '/kanbanman', component: KanBanMan },
      { path: '/traceman', component: TraceMan }
    ]
  }

HomeView.vue

<div class="container">
      <div class="row row-cols-3">
        <div class="col">
          <router-link to="/qualityana">质量分析</router-link>
        </div>
        <div class="col">
          <router-link to="/manuproman">生产工艺管理</router-link>
        </div>
        <div class="col">
          <router-link to="/palletman">托盘管理</router-link>
        </div>
        <div class="col">
          <router-link to="/workorderman">工单管理</router-link>
        </div>
         <div class="col">
            <router-link to="/kanbanman">看板管理</router-link>
          </div>
           <div class="col">
            <router-link to="/traceman">追溯管理</router-link>
          </div>
      </div>
       <router-view></router-view>
    </div>

QualityAna.vue

<template>
  <div class="com-page">
    <!-- TODO_03:子组件引入 -->
    <LineYield>111</LineYield>
    <RepairLineYield>返修产线良率</RepairLineYield>
    <RepairStationYield>返修工位良率</RepairStationYield>
    <StationYield>工站良率</StationYield>
    <PalletYield>托盘良率</PalletYield>
  </div>
</template>
<script>
// TODO_01:导入子组件
import LineYield from '@/components/BasicData/QualityAnaSubComponents/LineYield.vue'
import PalletYield from '@/components/BasicData/QualityAnaSubComponents/PalletYield.vue'
import RepairLineYield from '@/components/BasicData/QualityAnaSubComponents/RepairLineYield.vue'
import RepairStationYield from '@/components/BasicData/QualityAnaSubComponents/RepairStationYield.vue'
import StationYield from '@/components/BasicData/QualityAnaSubComponents/StationYield.vue'
export default {
  // TODO_02:注册
  components: {
    LineYield,
    PalletYield,
    RepairLineYield,
    RepairStationYield,
    StationYield
  },

LineYield.vue

<template>
  <div class="com-container">
    <!-- 真正显示图表的盒子 -->
    <!-- ref vue中获取dom元素的属性 -->
    <div class="com-chart" ref="lineyield_ref">我是图表</div>
  </div>
</template>

回答：

跳转到/qualityana页面什么也不显示，你在QualityAna.vue的DOM中随便写一个文字，看看页面是否显示，不是子组件不显示，怀疑是你的路由配置不对，你是否使用了嵌套路由
父组件已经引入子组件并注册，为什么父组件不显示子组件？
点击后
父组件已经引入子组件并注册，为什么父组件不显示子组件？

回答：

路由配置里，child 应该是 children

回答：

child 这个应该是children

const routes = [
  { path: '/', redirect: '/homeview' },
  {
    path: '/homeview',
    component: HomeView,
    children: [
      { path: '/qualityana', component: QualityAna },
      { path: '/manuproman', component: ManuProMan },
      { path: '/palletman', component: PalletMan },
      { path: '/workorderman', component: WorkOrderMan },
      { path: '/kanbanman', component: KanBanMan },
      { path: '/traceman', component: TraceMan }
    ]
  }

以上是 父组件已经引入子组件并注册，为什么父组件不显示子组件？ 的全部内容， 来源链接： utcz.com/p/934206.html

回到顶部