php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下。
现在基于vue的UI组件库有很多,比如iview,element-ui等。但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件。
举第一个栗子
用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示:
index.vue里写我们的组件,代码如下:
index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下:
接下来我们要在默认的main.js里将刚刚写的index.js文件导入,并通过Vue.use来使用它,代码如下:
大功告成,接下来在app.vue里直接使用就可以啦,可以看到页面已经显示相应的组件了,如图:
这时候我们还可以自定义click事件,并通过参数的方式传递给我们的插件,插件可以通过props属性获取到该事件,如图:
可以看到页面已经生效了:
Vue.component(id, [definition])用于注册或获取组件。
Vue.use(plugin)用于安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。当 install 方法被同一个插件多次调用,插件将只会被安装一次。
举第二个栗子
我们再建一个文件夹,如图:
我们要写一个组件,能够显示外部传进来的内容,并在3秒后自动消失,代码如下:
接下来我们要在index.js里使用构造器来创建它,如图:
依旧在默认的main.js里引用刚刚的js文件,并加入到Vue实例上,这样我们就可以直接通过this.$seconddemo()来调用了,代码如下:import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo
在app.vue里使用它,发现插件加载成功了,如图:
Vue.extend(options)是 Vue 的构造器,用于创建一个“子类”。
统一管理自定义组件
当组件数量很多时,我们可以通过提供一个统一的出口文件来管理这些自定义组件,首先在global文件夹下新建一个index.js文件,代码如图:
index.js文件帮我们把所有自定义的组件都通过Vue.component注册了,最后export一个包含install方法的对象给Vue.use()使用。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
php动态写入vue,Vue自定义动态组件使用详解相关推荐
- 数据列表 多选 html,Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行 ...
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
- 超简单!Vue 短信验证码组件开发详解
1. Vue 组件代码如下: Vue.component('timerBtn',{template: '<button v-on:click="run" :disabled= ...
- vue中的父子组件传值详解
父组件与子组件传值 //父组件通过标签上面定义传值 <template> //使用子组件,在里面传输数据<main :obj="data"></mai ...
- Vue组件-Confirm详解
Vue组件-Confirm详解 原作者:爱扎马尾的小狮子 一.使用的地方引用,传入属性和方法 在需要的地方引入组件,然后传入对应的属性和方法 组件 <template> <div : ...
- vue高级进阶( 二 ) 8种组件通信详解
猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$emit props父传子,$emit子传父,看 ...
- vue组件component详解
vue组件component详解 组件介绍 组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
- 【Vue路由(router)进一步详解】
Vue路由(router)进一步详解 query属性 具体实例代码如下: params属性 具体实例代码如下: props属性 replace属性 编程式路由导航 路由缓存 具体代码: 总结 本篇文章 ...
- java常量配置_java项目动态配置常量和peiconfig.properties配置使用详解
java项目动态配置常量和peiconfig.properties配置使用详解 点击:2 Java工程中配置信息一般都写在 properties文件中,下面这篇文章是对java基础配置的一点学习心得整 ...
最新文章
- 综述:NLP中的深度学习优势
- string to xml java_Java String to XML - Parse String to XML DOM Example - 入门小站-rumenz.com
- 需求规格说明书(SRS)特点
- 十一.安装Redis
- 面试官问我有环链表中怎么找到入口,本以为很简单当场却想傻了
- mysql重置id排序_列替换法重置MySQL自增长ID排序
- 论文浅尝 | 面向时序知识图谱推理的循环事件网络
- mysql explain insert_简述Mysql Explain 命令
- 2021年度训练联盟热身训练赛第二场(ICPC North Central NA Contest 2019,南阳师范学院),签到题ABCDEFGIJ
- 数据分析知识体系模型
- css固定定位如何基于父级来定为而不是视口
- SQL用month()函数当前月时,不足10的前面补0
- 计算机为什么有个来宾用户名,电脑里面突然多出来一个叫Guest的账户是怎么回事?...
- 亚马逊这样做竞争大的产品更有优势
- 【XSS跨站脚本】反射型xss(非持久型)
- 均方误差——MSE 和标准差 的区别
- 有5个人坐在一起,问第五个人多少岁?他说比第4个人大2岁。问第4个人岁数,他说比第3个人大2岁。问第三个人,又说比第2人大两岁。问第2个人,说比第一个人大两岁。最后问第一个人,他说是10岁。
- YOLO目标检测之IOU计算及其衍变体
- JAVA设计模式——第 8 章 适配器模式【Adapter Pattern】(转)
- 2020年淘宝年货销量数据监控可视化
热门文章
- python垃圾回收机制原理_如何理解和掌握Python垃圾回收机制?
- 石家庄市职称计算机,河北石家庄2010年职称计算机考试报名通知
- python 深拷贝_详解python的复制,深拷贝和浅拷贝的区别
- python with方法
- 广度优先搜索算法BFS讲解以及python 实现
- Java8 CopyOnWriteArrayList 源码分析
- VTK:碰撞检测用法实战
- boost::mp11::mp_set_push_front相关用法的测试程序
- boost::hana::fill用法的测试程序
- boost::mcgregor_common_subgraphs用法的测试程序