[Vue warn]: Unknown custom element:

html 复制代码
[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
ts 复制代码
<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 }
})
html 复制代码
<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组件应该被正确注册和使用,从而避免出现该警告。

相关推荐
浩浩测试一下24 分钟前
Web渗透测试之XSS跨站脚本之JS输出 以及 什么是闭合标签 一篇文章给你说明白
前端·javascript·安全·web安全·网络安全·html·系统安全
前端搬运工X2 小时前
Object.keys 的原生 JS 类型之困
javascript·typescript
肖老师xy2 小时前
h5使用better scroll实现左右列表联动
前端·javascript·html
一路向北North2 小时前
关于easyui select多选下拉框重置后多余显示了逗号
前端·javascript·easyui
Libby博仙2 小时前
.net core 为什么使用 null!
javascript·c#·asp.net·.netcore
一水鉴天2 小时前
为AI聊天工具添加一个知识系统 之26 资源存储库和资源管理器
前端·javascript·easyui
万物得其道者成2 小时前
在高德地图上加载3DTilesLayer图层模型/天地瓦片
前端·javascript·3d
闲人陈二狗3 小时前
Vue 3前端与Python(Django)后端接口简单示例
前端·vue.js·python
你挚爱的强哥3 小时前
基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单
javascript·vue.js·elementui
林涧泣4 小时前
【Uniapp-Vue3】uniapp创建组件
前端·javascript·uni-app