vue弹窗组件
文件结构component.vue<template> <div class="_vuedals" v-show="show"> <component v-if="options.component" :is="options.component" v-bind="options.props" v-on="options.events" ref="modalessComponent" ></component> </div></template><script> import Bus from "./bu...
2024-01-10
vue 递归组件
如果你的项目里面的数据结构是一个树状的数据结构然后递归组件是一个很好的一个解决你这个数据结构的一个方式就是组件内部调用自身tree.vue里面直接tree-node<tree-node></tree-node>还需要配置namename:'tree'好 还有什么问题的话 可以私聊我还有就是我最近发现递归组件不好用emit来传值给父组件然后...
2024-01-10
vue组件的使用
1.局部组件的使用<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>vue组件的使用</title> <style> body{ ...
2024-01-10
vue图片上传组件
前言：很多项目中都需要用到图片上传功能，而其多处使用的要求，为了避免重复造轮子，让我决定花费一些时间去深入了解，最终封装了一个vue的图片上传组件。现将总结再次，希望有帮助。 <div class="upload-wraper"> <input type="file" id="upload_ele" multiple="false" accept="image/*" @change="uploadFile()" /></div>type...
2024-01-10
vue之自定义组件
除了核心功能默认内置的指令外，vue也允许用户注册自定义指令。虽然在vue2.0中，代码复用和抽象的主要形式是组件，但是有些情况下，我们仍需要对普通DOM元素进行底层操作，这个时候就需要用到自定义指令，例如，我们希望将元素的背景色变为红色，就可以通过指令实现。<!DOCTYPE html><html lang="en">...
2024-01-10
vue兄弟组件通信？
前提是在原来老代码的基础上，保证不影响其他功能。一个页面多个表单组件来回切换，数据相互关联，怎么优雅的在父页面提交完整的数据，子组件的修改的数据，能够双向同步父组件？在原代码基础上很容易扩充字段。回答：如果多个组件见有互相控制的，那么使用自定义组件的 v-model 规则改造子表单，然后在父级直接用 v-model 绑定就可以了。其实就是 props + $emit 的方式。每次子表单修改之后兄...
2024-02-22
vue 简单日历组件
首页<!--showToday:是否显示返回今天按钮 on-click：监听组件内的点击事件--><template> <my-calendar :showToday='true' @on-click='showInfo'></my-calendar></template><script>import myCalendar from './components/myCalendar'export default { compon...
2024-01-10
vue 封装模态框组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>模态框组件</title> <style> p,h4{ margin: 0; } .modal{ width: 500px; background: #fff; ...
2024-01-10
vue抽象组件拦截事件
<is-abstract> <is-show /> </is-abstract>export default { abstract: true, name: "is-abstract", render() { const slot = this.$slots.default; const vNode = slot[0]; const comp...
2024-03-07
vue2隔代组件通讯？
代码如下provide(this: any) { return { tableData: () => this.changeTableData, } }, this.changeTableData是要刷新表格的数据，provide发送changeTableData方法，在App.vue点击触发this.changeTableD...
2024-02-05
vue2.0组件快速入门
前言最近开始在学vue相关的内容。组件这章的内容比较多。看了http://www.cnblogs.com/keepfool/p/5625583.html这篇博客，博主总结的还比较全面也挺清晰，可是这篇博客的知识点跟实例都是基于vue 1.0版本的，所以参考这篇博客，我将vue2.0版本中的相关知识点做了一个总结。算是自己学习的一个笔记什么是组件...
2024-01-10
vue实现秒杀倒计时组件
本文实例为大家分享了vue实现秒杀倒计时组件的具体代码，供大家参考，具体内容如下下面是使用Vue实现秒杀倒计时组件开发思路1.请求服务器获取这一刻的服务器时间（统一以服务器时间为基准）2.获取用户当前电脑时间与服务器时间比对，获取时间差。以当前电脑时间-减去时间差为最终时间(定...
2024-01-10vue组件中的数据传递方法
Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况：父组件向子组件传递数据，通过 props 传递数据。子组件向父组件传递数据，通过 events 传递数据。两个同级组件之间传递数据，...
2024-01-10
vue之组件的使用（转载）
在工程目录/src下的component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。<template> <div id="firstcomponent"> <h1>I am a title.</h1> <a> written by {{ author }} </a> </div></template><script type="text/javascript">export default { data () { ...
2024-01-10详解用vue编写弹出框组件
前言最近研究了用vue编写弹出框的组件，发现其实这里面的门道还是有很多的。这篇文完全是用来记录总结下最近的学习成果，同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架，因此适合有一定vue2.0基础的同学阅读。设计组件的思考其实单纯的编写一个弹出框组件并不...
2024-01-10
npm 发布 vue 组件
创建 vue 组件1、创建vue项目，为了简洁方便，推荐使用webpack-simple构建一个项目vue init webpack-simple your-project2、在 src 目录下新建子目录lib，用来放后面自己写的所有组件3、编写自己的组件首先新建一个vue文件和一个index.jsvue用于编写组件的模版和逻辑，像平时封装插件一样ps：需要给组件命名 name:...
2024-01-10
vue2.0组件通信小总结
1.父组件->子组件父组件<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}子组件(子组件通过props来接收数据:)// 写法1：props: ['childMsg']// 写法2：props: { childMsg: Array //这里指定了字符串类型，如果类型不一致会警告}// 写法3：props: { ...
2024-01-10
Vue组件的高级用法
1，递归组件<!-- 递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。 设置那么House在组件模板内就可以递归使用了,不过需要注意的是， 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded 组件递归用来开发一些具体有未知层级关系...
2024-01-10vue实现一个炫酷的日历组件
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图： 假设今天为2018-09-0290天前：90天后;产品需求：展示当前日期（服务器时间）前后90天，一共181天的日期。日历可以左右滑动切换月份。当月份的如果不在181天区间的...
2024-01-10
vue 递归组件的简单使用示例
前言递归 相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归相加，直到满足目标数条件。递归虽然能解决大部分，但弊处在于，很容易写出死循环的代码，导致爆栈。下面...
2024-01-10
vue3的动态组件是如何工作的
目录一、组件注册1.1 全局注册1.2 注册全局组件的过程1.3 应用挂载的过程二、动态组件2.1 绑定字符串类型2.2 绑定对象类型三、阿宝哥有话说3.1 除了 component 内置组件外，还有哪些内置组件？3.2 注册全局组件与局部组件有什么区别？注册全局组件注册局部组件解析全局注册和局部注册的组件3.3 动态组...
2024-01-10
vue更多筛选项小组件使用详解
本文实例为大家分享了vue更多筛选项小组件的实现方法，供大家参考，具体内容如下效果：就是一个简单的小效果，当有很多筛选条件时，默认只展示几项，不会觉得很冗余，有需要可以点击展开，进行更过的条件筛选。并且能够自动判断界面的尺寸，决定是否需要更多筛选项。直接把“查询、重置...
2024-01-10
vue3+tsx 内置组件不生效
我的开发模式为 VUE3+TSX我想使用VUE的内置组件<component />自动加载组件,代码为：import { defineComponent } from 'vue'import Comp1 from './components/Comp1'import Comp2 from './components/Comp2'export default defineComponent(...
2024-03-15
