vue如何解决循环引用组件报错的问题
时间:2018-09-22
这篇文章主要介绍了vue如何解决循环引用组件报错的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
问题由来
最近在做项目的时候遇到使用循环组件,因为模式一样,只有数据不一样。按照普通组件调用格式来做的时候总是报错,错误信息为[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/>' })
用上面的方法全局引入组件就可以解决循环引用组件报错的问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 基于达尔文进化论的遗传算法,还能帮你破解同事的密码?| 附代码
- Vue + Node + Mongodb 开发一个完整博客流程
- Golang中用interface{}接收任何参数与强转
- Machine Box创始人教你快速建立一个ML图像分类器
- 【图解】Web前端实现类似Excel的电子表格
- 一个简单而强大的深度学习库—PyTorch
- CSS实现水平|垂直居中漫谈
- 深度学习开源框架PaddlePaddle发布新版API,简化深度学习编程
- HTML5游戏引擎深度测评
- 使用NumPy介绍期望值,方差和协方差
- Cleaver快速制作网页PPT
- 【学术】马尔可夫链的详细介绍及其工作原理
- 想把自拍背景改成马尔代夫?手把手教你用深度学习分分钟做到
- 还记得谷歌之前发现的两颗行星吗?今天谷歌对此披露了重要技术细节
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 因str_replace导致的注入问题总结
- laravel框架中间件 except 和 only 的用法示例
- 浅析Python 多行匹配模式
- PHP命名空间定义与用法实例分析
- php array_chunk()函数用法与注意事项
- Laravel如何同时连接多个数据库详解
- PHP面向对象程序设计中的self、static、parent关键字用法分析
- php实现简单的守护进程创建、开启与关闭操作
- 关于CentOs系统自带python和yum卸载后的解决办法
- php5对象复制、clone、浅复制与深复制实例详解
- Linux命令行快速技巧之定位一个文件的办法
- ubuntu中python调用C/C++办法之动态链接库详解
- linux中使用boost.python调用c++动态库的办法
- 在Linux系统下上传项目到码云的办法
- PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】 原创