首页 > 其他分享 >[Vue warn]: Unknown custom element:

[Vue warn]: Unknown custom element:

时间:2025-01-10 18:29:06浏览次数:3  
标签:ProductListDialog src vue Unknown element warn ExperienceShare components 组件

[Vue warn]: Unknown custom element: <experience-share> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <ProductListDialog> at src/views/tools/fake-strategy/components/product-list-dialog.vue
       <BatchVersionList> at src/views/tools/fake-strategy/components/batch-version-list.vue
         <ElDialog> at packages/dialog/src/component.vue
           <FirstAuditList> at src/views/tools/fake-strategy/components/identify-list.vue
             <TemplateList> at src/views/tools/fake-strategy/index.vue
               <AppMain> at src/layout/components/AppMain.vue
                 <Layout> at src/layout/index.vue
                   <App> at src/App.vue
                     <Root>

这个警告信息表示在ProductListDialog组件中使用的experience-share组件没有正确注册。为了修复这个问题,请确保在ProductListDialog组件中正确导入和注册ExperienceShare组件。

步骤

  1. 导入ExperienceShare组件
    ProductListDialog.vue文件中,确保导入ExperienceShare组件。

  2. 注册ExperienceShare组件
    ProductListDialog.vue文件的components选项中注册ExperienceShare组件。

修改后的代码

ProductListDialog.vue
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import { productAll, productDetailSimple } from '@/api/product'
import ExperienceShare from '@/components/ExperienceShare/index.vue'

@Component({
  name: 'ProductListDialog',
  components: { ExperienceShare }
})
<template>
  <div class="product-list-dialog">
    <el-dialog :visible="visible" :before-close="handleClose" :close-on-click-modal="false" title="产品列表" width="1200px" append-to-body>
      <div class="product-list-wrap">
        <div class="button-container">
          <el-button type="danger" size="mini" @click="handleAdd">添加</el-button>
        </div>
        <div class="table">
          <el-table :data="tableData" :height="tableHeight">
            <!-- 表格列 -->
          </el-table>
        </div>
        <div class="pagination space-between">
          <experience-share :type="3" />
          <el-pagination background layout="total, prev, pager, next" :current-page="parseInt(listQuery.page) + 1" :page-size="parseInt(listQuery.pageSize)" :total="parseInt(listQuery.total)" @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ExperienceShare from '@/components/ExperienceShare/index.vue'; // 确保路径正确

export default {
  name: 'ProductListDialog',
  components: {
    ExperienceShare
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      listQuery: {
        page: 0,
        pageSize: 10,
        total: 0
      }
    };
  },
  computed: {
    tableHeight() {
      return Math.floor(this.$store.state.app.tableHeight * 2 / 3);
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleAdd() {
      // 处理添加操作
    },
    handleCurrentChange(page) {
      this.listQuery.page = page - 1;
      // 处理页码变化
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

确保路径正确

请确保导入路径@/components/ExperienceShare/index.vue是正确的。如果路径不正确,请根据实际文件位置调整。

通过以上修改,experience-share组件应该被正确注册和使用,从而避免出现该警告。

在这里插入图片描述

标签:ProductListDialog,src,vue,Unknown,element,warn,ExperienceShare,components,组件
From: https://blog.csdn.net/m0_65152767/article/details/145039377

相关文章

  • element-ui分页组件Bug 当前页不变化
    原因有可能是点击搜索的时候在搜索里面通过代码去改变了current-page让分页回到第一页,但有可能element内部的页码数据未改变,因此当在此点击第二页的时候相当于页码未发生改变,current-change事件不触发(纯属个人想法)解决方法给分页加上一个控制显示和隐藏的变量v-if="pageshow"......
  • React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRoot
    【2024最新版】React18核心源码分析教程(全61集)Element对象与Fiber对象在React中,Element对象和Fiber对象是核心概念,用于实现React的高效渲染和更新机制。以下是它们的详细解读:1.Element对象定义React的Element对象是通过React.createElement或JSX......
  • Vue3 - Element Plus 报错 Uncaught TypeError: Cannot set property ‘value‘ of un
    前言关于此问题网上的教程都无法解决,如果您的报错信息与我相似,即可解决。在vue3+element-plus项目开发中,解决报错:UncaughtTypeError:Cannotsetproperty‘value‘ofundefined,使用组件时提示错误,意思是尝试修改一个不存在的对象属性或者没有权限修改的属性,很奇怪......
  • vue3的element-plus侧边菜单栏测试案例
    未正确集成element-plus的先看前面的随笔集成后没问题,下面案例才能正常运行展示<scriptlang="ts"setup>import{Document,MenuasIconMenu,Location,Setting,}from'@element-plus/icons-vue'consthandleOpen=(key:string,keyPath:string[])=>{......
  • Vue ElementUI 树表格
    树表格做懒加载-点击小箭头走接口children为[]则使用hasChildren的true/false来判断是否有子节点,另,如果要做懒加载必须加lazy及load<el-tablev-if="refreshTable"v-loading="loading":data="deptList"lazy:load="load"row-ke......
  • 给element-plus table 表头添加自定义class
    <el-tableclass="margin-top-16":data="selectedTableData":header-cell-class-name="headerCellClassName"style="width:100%"height="400"><el-table-columnprop="name&q......
  • vue3+elementPlus实现利用 JSON 数据(`formItems`)描述表单结构,配置化生成表单
    一、功能点(一)组件功能点动态表单生成根据formItems配置动态生成表单项,支持多种类型(如input、radio、select)。表单校验通过rules定义表单校验规则,调用validate方法触发校验。双向绑定表单项通过v-model绑定到form对象,实现数据同步。支持扩展性支持通过form......
  • Vue+Elementui: el-select组件下拉数据量大,产生页面卡顿或崩溃,详细解决方案!
    1.安装插件npminstallvue-virtual-scroll-list2.封装组件1>新建文件夹VirtualSelect创建文件:index.vue,OptionNode.vue/VirtualSelect/index.vue<template><div><el-selectsize="mini"popper-class="virtualselect"......
  • vue3版本下element-plus和antd-vue选哪个更好一些?.240109
    Vue3发布后,各家第三方库开始陆续重构并支持Vue3,国内两大知名框架ElementPlus和AntDesignVue也相续发布新版支持Vue3。到底应该怎么选择呢?ElementPlus和AntDesignVue3都已不在支持IE了,并不是他们自己放弃了IE而是Vue3本身已经放弃了IE。如果想在低版......
  • 期末大作业 :基于vue+elementUi+springboot的购物商城
    采用四层Web结构实现类似于淘宝购物系统开发,基本要求如下:实现多类型账户管理(店铺、顾客、一般浏览者)店铺实现对商品、顾客订单、店铺信息的管理顾客实现对商品查询、自身订单、个人信息的管理一般浏览者只拥有商品浏览的权限要求能完整实现货物的买卖全过程(模拟淘宝处理)辅助功......