使用Vue自定义组件出现的错误
前言
在使用Vue的自定义组件的功能时,出现了一个错误
vue.js:634 [Vue warn]: Unknown custom element: <student> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
代码如下
html
<body><div id="div"><student myname="不知火舞" age="24" sex="女"></student></div> </body>
js
//创建vue对象 new Vue({//指定此vue对象解析的模板区域el: "#div" });//自定义student标签组件 Vue.component("student", {//定义组件的属性props: ["myname", "age", "sex"],//定义组件的数据data: function () {return {school: "清华中学"}},//定义此组件的底层模板template: `<div><div>{{myname}}</div><div>{{age}}</div><div>{{sex}}</div></div>`});
js解释
component( ):此方法是
Vue
用于自定义组件的方法。参数1:指定自定义组件的组件名。
参数2:配置组件的参数属性。
- props:配置组件的属性,每个组件可以配置多个属性,多个属性使用数组包装。
- data:配置组件的数据,可以在组件模板中使用定义好的数据。
- template:配置此组件的底层模板,可以在此模板中使用插值表达式,引用前面配置的属性和数据。
错误解决
将创建Vue对象和自定义组件的代码交换以下即可,要先定义组件,再创建Vue对象。
//自定义student标签组件
Vue.component("student", {//定义组件的属性props: ["myname", "age", "sex"],//定义组件的数据data: function () {return {school: "清华中学"}},//定义此组件的底层模板template: `<div><div>{{myname}}</div><div>{{age}}</div><div>{{sex}}</div><div>{{school}}</div> </div>`});//创建vue对象
new Vue({//指定此vue对象解析的模板区域el: "#div"
});
使用Vue自定义组件出现的错误相关推荐
- vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
- vue自定义组件,插槽,自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件 语法 Vue.component('自定义组件名', {pr ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
- Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装 二. 创建vue组件 三.使用 四.效果图 一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
- Vue自定义组件之时间跨度选择器
时间跨度选择器 该组件是个时间跨度选择器. 基于 vue自定义组件之选择器 和 Vue自定义组件之日期时间范围选择器 点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现 日期时间范围选择 代码 ...
- Vue自定义组件npm上传私服,且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用 安装镜像源管理工具nrm 发布自定义组件到公司私服 若未下载nrm源管理工具直接使用npm设置私服地址也可以 以下步骤都是基于npm命令 从私服下 ...
- Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...
- vue 自定义组件双向数据绑定
文章目录 序 属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定 总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
最新文章
- 简单介绍nginx 变量使用
- python 统计分析apache日志_python分析apache访问日志脚本分享
- python使用什么来表示不同级别的语句块-Python
- 基于 MATLAB 的 PCM 编码解码实现
- Flex4与WebService通信
- asp留言板源码-XYCMS留言板 v8.0
- tensorflow之视频质量诊断
- 如何使Adobe Reader看PDF时的背景变为保护眼睛的绿色
- java参数默认值_java函数参数默认值
- 中国科学院大学计算机在职博士招生,中国科学院在职博士研究生如何报考?
- python使用matploatlib绘制散点图和折线图
- 求球体的表面积和体积
- luogu P1195 口袋的天空
- pu膜刻字膜热转印膜在衣服上的烫印参数
- 自动化 计算机方向非核心期刊,自动化控制方向好中的核心期刊
- (后续更新)【微信小程序】毕业设计 租房小程序开发实战,零基础开发房屋租赁系统小程序
- DevOps推广实践总结
- 百度地图获取省市边界、设置图片背景
- git revert回退时提示One or more files are in a conflicted state
- java程序封装最小单位,Java面试真题精选
热门文章
- Linux系统服务器修改用户密码的方法
- 2022最新的高并发多线程面试题,一文掌握offer钥匙
- 失业七个月,面试六十家公司的深圳体验
- js三座大山之异步-Promise三种状态及变化
- 照片名称:Photoshop,
- 高德地图多边形地图的设置
- React Native列表视图FlatList使用优化实践指南
- 【英语命名】常用命名单词,起始,前后,停,处理,存取,配置......
- linux下mongodb启动问题
- Python界面编程第十七课:Pyside2 (Qt For Python)QCompleter自动完成