#独家
父组件已经引入子组件并注册,为什么父组件不显示子组件?

2023-05-08 0 2,443

路由配置:

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中随便写一个文字,看看页面是否显示,不是子组件不显示,怀疑是你的路由配置不对,你是否使用了嵌套路由

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. JK下载官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. JK下载官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. JK开发团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

JK软件下载官网 技术分享 父组件已经引入子组件并注册,为什么父组件不显示子组件? https://www.jkxiazai.com/1701.html

JK软件应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务