vue install 注册组件
1、myPlugin.js文件
let MyPlugin = {};
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
console.log('myGlobalMethod')
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
console.log('myMethod')
}
}
export default MyPlugin
2、APP.vue文件
<template> </template>
<script>
import Vue from 'vue'
import MyPlugin from './myPlugin'
Vue.use(MyPlugin) export default {
data() {
return {
}
},
methods: {
},
mounted: function(){
this.$myMethod();
Vue.myGlobalMethod();
}
}
</script>
说明:以上两个文件位于同一目录
组件注册完成,输出:

vue install 注册组件的更多相关文章
- vue统一注册组件
文件夹下面组件数量较多,如果每一个组件先import然后在 components,虽然灭有问题,但是会导致代码量大,而且不直观 解决办法: 将图元组件进行统一注册 新建一个pixels文件,文件里面的 ...
- Vue.js 注册组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- vue.js之组件(上篇)
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- VueJs(8)---组件(注册组件)
组件(注册组件) 一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组 ...
- vue.js之组件篇
Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- 详解Vue大护法——组件
1.什么是组件化 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题进 ...
- vue 自动注册全局组件
vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...
随机推荐
- 【bzoj1336/1337/2823】[Balkan2002]Alien最小圆覆盖 随机增量法
题目描述 给出N个点,让你画一个最小的包含所有点的圆. 输入 先给出点的个数N,2<=N<=100000,再给出坐标Xi,Yi.(-10000.0<=xi,yi<=10000. ...
- 查看端口被占用并结束进程 mac
- BZOJ2657 [Zjoi2012]旅游(journey) 【树的直径】
题目 到了难得的暑假,为了庆祝小白在数学考试中取得的优异成绩,小蓝决定带小白出去旅游~~ 经过一番抉择,两人决定将T国作为他们的目的地.T国的国土可以用一个凸N边形来表示,N个顶点表示N个入境/出境口 ...
- 基于kubuntu的C/C++开发环境搭建
基于kubuntu的环境搭建 系统: kubuntu 14.04 中文输入法: SICM ibus fcitx:sougou 中文输入法的安装比较复杂,由于各种的不兼容,可能会出现各种的问题: 终端配 ...
- 购物(sum)
购物(sum) 题目描述 visit_world 有一个商店,商店里卖N个商品,第ii 个的价格为 a[[i] 我们称一个正整数K 是美妙的,当且仅当我们可以在商店里选购若干个商品,使得价格之和落在区 ...
- js复制到粘贴板
http://www.cnblogs.com/52fhy/p/5383813.html(移动端有兼容性问题) 要页面加载完直接绑定事件,否则第一次点击是绑定事件,第二次才触发事件 移动端需要设置tex ...
- Java面试题之Integer.valueOf(String s);采用了什么设计模式
Integer.valueOf(String s);//采用了亨元设计模式: 亨元模式: 它是以一种“节约内存,提高性能”为出发点的设计模式,运用共享技术有效的支持大量细粒度对象的复用. 源码解析: ...
- Swift实战-单例模式
设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.GoF提出了23种设计模式,本系列将使用Swift语言来实现这些设计模式 概述 整个应用生命 ...
- 贪吃蛇(bzoj 4213)
Description 最近lwher迷上了贪吃蛇游戏,在玩了几天却从未占满全地图的情况下,他不得不承认自己是一个弱菜,只能改去开发一款更弱的贪吃蛇游戏. 在开发的过程中,lwher脑洞大开,搞了一 ...
- updatepanel中使用alert弹出框方法
原文发布时间为:2009-05-17 -- 来源于本人的百度文章 [由搬家工具导入] ScriptManager.RegisterStartupScript(this.UpdatePa ...