vue如何解决循环引用组件报错的问题


Posted in Javascript onSeptember 22, 2018

问题由来

最近在做项目的时候遇到使用循环组件,因为模式一样,只有数据不一样。按照普通组件调用格式来做的时候总是报错,错误信息为[Vue warn]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决方案

查询了网上各种资料之后,发现是循环调用组件时,组件比vue实例后创建,官方文档里写组件必须先于实例化引入,所以说组件没有正确的引入。

解决方式

解决的方式就是全局引入组件,并且在vue实例化前。

具体到我们项目中,就是在main.js里引入。

具体代码如下main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store';
import iView from 'iview';
import './styles/index.less'
import {VTable,VPagination} from 'vue-easytable'
import 'vue-easytable/libs/themes-base/index.css'
import Axios from './utils/axiosPlugin'
import './styles/button.css'
import './styles/common.css'
// require('./mock/mock')
import selFile from './views/file/selFile.vue'

Vue.use(iView);
Vue.use(Axios);

Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
Vue.component("selFile",selFile)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 router,
 components: { App },
 template: '<App/>'
})

用上面的方法全局引入组件就可以解决循环引用组件报错的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 #Javascript
angular的输入和输出的使用方法
Sep 22 #Javascript
vue构建动态表单的方法示例
Sep 22 #Javascript
小程序实现展开/收起的效果示例
Sep 22 #Javascript
玩转vue的slot内容分发
Sep 22 #Javascript
vue 巧用过渡效果(小结)
Sep 22 #Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 #Javascript
You might like
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
使用console进行性能测试
2015/04/27 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
税务专业毕业生自荐信
2013/11/10 职场文书
自我鉴定四大框架
2014/01/17 职场文书
《三峡》教学反思
2014/03/01 职场文书
电视购物广告词
2014/03/19 职场文书
司机工作自我鉴定
2014/09/19 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript