第一次使用自定义vue组件

最新推荐文章于 2024-03-22 10:26:09 发布
最新推荐文章于 2024-03-22 10:26:09 发布
阅读量84 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38327242/article/details/115035800
版权

项目中需要一个暂无数据的组件，为了方便开发使用，需要全局引入，所以我开始尝试自己写组件
1、在components文件夹下创建了组件的文件夹，里面包含要用的组件和注册组件并抛出的js文件，有了这个文件我们才能在main.js中使用这个组件
在这里插入图片描述
2、组件的写法就没啥说的了，都一样的。然后写注册js
在这里插入图片描述
3、全局引入组件
在这里插入图片描述
这里引入组件的路径一定要用 @，如果使用相对路径，vue会默认到node_modules中寻找组件，我一开始就这么写的，一直提示让我下载这个插件，其实就是路径写错了(Ｔ▽Ｔ)，还研究了老半天，得亏了男朋友的友情提示，这样就可以使用了
4、给开发投入使用喽
在这里插入图片描述
搞定！

妄嵬
关注
专栏目录
vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
VUE项目中组件的创建-引入-注册-使用
liuxiaowei
05-31 5854
什么是组件化？ 组件化就是将一个完整的页面根据功能拆分成多个小的功能块，每个功能块独立的完成自己的功能 不同组件的组合就构成了我们一个完整的页面，这个页面可以根据需要随时更换新的组件，这样更加方便管理，并且大大提高了页面的扩展性。也 更加容易维护 每一个拆分后的组件可以根据功能拆分成更小的功能组件。 任何组件都可以被抽象成一颗组件树 组件的使用 如何使用组件构建界面？ 1、新建组件—新建一个vue文件：如Header.vue 2、引入组件—在需要引入这个组件的vue文件中引入新建的文件(Header.v
Vue3 注册全局组件、自动注册路由
前端kk的博客
03-19 3703
Vue3 注册全局组件、自动注册路由
vue中的插槽总结-默认插槽，具名插槽，作用域插槽
qq_43170213的博客
10-26 1602
什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 1，默认插槽示例 父组件 <template> <div> 我是父组件 <slotOne1> <p style="color:red">我是父组件插槽内容</p>
vue 组件第一次不渲染问题_Vue.js的常见问题
weixin_39869043的博客
12-28 2285
1、响应式属性和方法每个Vue实例都会代理其data对象里所有的属性。var data={a:1}var vm=new Vue({data:data})vm.a===data.a // -> true设置属性也会影响到原始数据vm.a=2data.a // -> 2 ... 反之亦然data.a=3vm.a // -> 3即：都可以使v...
vue-组件的自定义事件
m0_64081601的博客
03-22 2349
假如子组件是Demo，父组件是app，子组件已经在父组件中被引用了,例如要给demo绑定一个hello自定义事件,在A中事件的回调是updatethis.$off('绑定的事件名’）在父组件使用组件实例对象身上的$off进行解绑若解绑多个事件，则使用数组包裹，如果不传参数，所有的自定义事件都解绑若想让自定义事件只能触发一次，可以使用once修饰符，或者$.once方法。
vue 组件第一次不渲染问题_VUE的某些常见问题及解决方法
weixin_39738115的博客
12-28 3091
VUE的某些常见问题及解决方法双向绑定数据，界面未渲染？最近做vue项目的过程中，经常碰到会有双向绑定数据，data中定义的数据进行变动时，页面实际展示层未改变。常见的应用场景有下面几种：form表单里面，修改表单的时候，分明预置了数据，但是没有显示element-ui常用的select组件，下拉选择了一个元素，但是选中框中并没有显示自己写选中切换的组件，点击后触发active的样式，触发的字段为...
vue 组件第一次不渲染问题_解决Vue循环中子组件不实时更新的问题
weixin_35695434的博客
01-11 1677
问题描述使用Element-UI中的table组件时会遇到一个常见的问题。当在el-table中调用子组件的时候会出现数据更新后，子组件没有重新渲染的问题。 eg:资源列表中的健康度组件。 代码如下： {{scope.row.name}}理论上当我更新数据的时候，sourceData的值已经发生了改变(而不是其中的某个字段发生了改变)，子组件应该获取的数据更新并重新渲染。实际上该页面的健康度组件...
vue 组件第一次不渲染问题_vue中出现组件不渲染更新的问题，方法总结
weixin_36397447的博客
02-05 1300
vue中出现组件不渲染更新的问题，方法总结1.用this.$forceUpdate()方法例如：this.data.status= false; // 数据改变this.$forceUpdate(); // 调用2.如果是object或者是array类型的话改变值最好用 this.set(),this.set(),this.set(),this.delete(),array.splice()等...
使用vue+antd，自定义vue组件，实现功能复用
LiTeng58的博客
11-29 2819
1.前言 1、在做工作中，我们会发现有些前端操作是经常会用到的，比如Table表格的添加和修改，如果用到一次写一次,那我们的代码就太臃肿了； 2、我们可以把这些可以复用的功能抽成一个组件来循环使用，哪里需要用到就只需要去调用就行了。 2.直接上图 1.这是需要做的样式界面。 2.这是添加界面 3.这是修改界面 可以看得出来，添加界面和修改的界面都是同一种的界面，只是修改的时候获取了数据。 功能快捷键 撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Com
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
11-29
简介 Vue.use( plugin )：安装 Vue.js ...这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象： MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = f
详解vue 自定义marquee无缝滚动组件
10-17
7. **性能优化**：为了提高性能，可以考虑使用虚拟滚动技术，只渲染可视区域内的列表项，而非一次性渲染所有数据。 8. **可配置性**：为了让组件更具通用性，可以添加一些可配置选项，如滚动速度、方向（左右滚动、...
沈阳建筑大学在河南2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
贵州茅台数据(1).xlsx
09-16
贵州茅台数据(1)
cwgl_jy1301.doc
09-16
cwgl_jy1301.doc
java-ssm+jsp游戏账号交易系统实现源码(项目源码-说明文档)
09-16
登录进入游戏账号交易系统可以查看系统用户管理，用户信息管理，海洋新闻管理，海鲜信息管理，购买信息管理，订退单信息管理和系统管理首页、个人中心、卖家管理、用户管理、游戏类别管理、手续费用管理、地下城与勇士管理、地下城账号购买、地下城账号换绑管理、地下城账号申诉管理、地下城私信聊天管理、地下城私信回复管理、英雄联盟管理、英雄联盟购买管理 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
java-ssm+jsp医院资产管理系统实现源码(项目源码-说明文档)
09-16
登陆系统后，可以查看主页、个人中心、员工管理、供应商管理、设备类型管理、仪器设备管理、设备采购管理、设备入库管理、设备申请管理、检修信息管理等功能 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
一款基于fofa根据域名或fofa语法收集C段分布数量的工具_Ceyes.zip
最新发布
09-16
一款基于fofa根据域名或fofa语法收集C段分布数量的工具_Ceyes
intro-程序员问卷调查
09-16
程序员问卷调查 程序员问卷调查 程序员问卷调查 程序员问卷调查 程序员问卷调查
Vue自定义分页组件实现与原理解析
- **可配置性**：提供配置项，让用户可以自定义每页显示的数量，或者是否显示跳转到第一页和最后一页的按钮。 - **响应式设计**：确保分页器在不同屏幕尺寸下都能良好展示。 - **用户体验**：添加加载状态提示，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值