浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件


Posted in Javascript onDecember 07, 2017

简介

Vue.use( plugin ):安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

当 install 方法被同一个插件多次调用,插件将只会被安装一次。

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
  // 逻辑...
 }
 // 2. 添加全局资源
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
  ...
 })
 // 3. 注入组件
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
  ...
 })
 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  // 逻辑...
 }
}

通过全局方法 Vue.use() 使用插件:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

也可以传入一个选项对象:

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件,届时只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在例如 CommonJS 的模块环境中,你应该始终显式地调用 Vue.use():

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

实例:实现一个children组件

在main.js中使用该组件的方法:

import childModule from './components/children'
Vue.use(childModule)

组件文件夹的目录结构如下:

|-components
|-children


|-index.js 导出组件,并且install


|-children.vue (定义自己的组件模板)

children.vue代码如下:

import childrencomponent from './children.vue'
const childrenMo = {
  install:function(Vue){
    Vue.component('childModule',childrencomponent)
  }
}
export default childrenMo

这样就实现了一个通过vue.use调用一个全局组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 #Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
vue中路由参数传递可能会遇到的坑
Dec 07 #Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 #Javascript
面包屑导航详解
Dec 07 #Javascript
谈谈JS中的!!
Dec 07 #Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 #Javascript
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php简单提示框alert封装函数
2010/08/08 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
Python数据类型之Set集合实例详解
2019/05/07 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
大气污染防治方案
2014/05/19 职场文书
保安公司服务承诺书
2014/05/28 职场文书
高中生物教学反思
2016/02/20 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS