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

2024-10-08 20:10:41

简介

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调用一个全局组件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

关于axios不能使用Vue.use()浅析

前言最近在学习axios,在使用过程遇到了一些问题,觉着有必要给大家分享下,关于axios的基本知识大家可以参考这篇文章:axios基本入门用法教程 ,下面话不多说了,来一起看看详细的介绍吧. 问题相信很多人在用Vue使用别人的组件时,会用到 Vue.use() .例如:Vue.use(VueRouter) . Vue.use(MintUI) .但是用 axios时,就不需要用 Vue.use(axios) ,就能直接使用.那这是为什么呐? 答案因为 axios 没有 install. 什
浅谈Vue.use的使用

vue.use(plugin, arguments) 语法参数:plugin(Function | Object) 用法: 如果vue安装的组件类型必须为Function或者是Object 如果是个对象,必须提供install方法如果是一个函数,会被直接当作install函数执行 install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments 先举个? 我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-dem
浅谈Java自定义注解和运行时靠反射获取注解

java自定义注解 Java注解是附加在代码中的一些元信息,用于一些工具在编译.运行时进行解析和使用,起到说明.配置的功能. 注解不会也不能影响代码的实际逻辑,仅仅起到辅助性的作用.包含在 java.lang.annotation 包中. 1.元注解元注解是指注解的注解.包括 @Retention @Target @Document @Inherited四种. 1.1.@Retention: 定义注解的保留策略 @Retention(RetentionPolicy.SOURCE) //注解仅
浅谈Django自定义模板标签template_tags的用处

自定义模板标签,过滤器.英文翻译是Customtemplatetagsandfilters.customfilter自定义过滤器今天不在我的记录范围之内,以后用到再看官方文档也不迟. **问题1:**customtemplatetags到底长啥样? customtemplatetags-github Manytemplatetagstakeanumberofarguments–stringsortemplatevariables–andreturnaresultafterdoingsomepro
浅谈Java自定义注解相关知识

一.自定义注解格式分析 Java 中自带的 @Override 注解 , 源码如下 : @Target(ElementType.METHOD) @Retention(RetentionPolicy.SOURCE) public @interface Override { } 注解分为两部分 : ① 元注解 ; ② public @interface 注解名称 ; 二.注解本质分析按照 public @interface 注解名称格式 , 写出一个注解 , 编译该注解代码生成 Annotat
浅谈innodb_autoinc_lock_mode的表现形式和选值参考方法

前提条件,percona 5.6版本,事务隔离级别为RR mysql> show create table test_autoinc_lock\G *************************** 1. row *************************** Table: test_autoinc_lock Create Table: CREATE TABLE `test_autoinc_lock` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
浅谈v-for 和 v-if 并用时筛选条件方法

如下所示: <ul id="ul"> <li v-for="todo in todos" v-if="todo<4"> {{ todo }} </li> </ul> <script> varvm=new Vue({ el:"#ul", data:{ todos: [ 1, 2, 3, 4, 5 ] } }) </script> 说明:在处于同一节点的
浅谈pandas.cut与pandas.qcut的使用方法及区别

pandas.cut: pandas.cut(x, bins, right=True, labels=None, retbins=False, precision=3, include_lowest=False) 参数: 1. x,类array对象,且必须为一维,待切割的原形式 2. bins, 整数.序列尺度.或间隔索引.如果bins是一个整数,它定义了x宽度范围内的等宽面元数量,但是在这种情况下,x的范围在每个边上被延长1%,以保证包括x的最小值或最大值.如果bin是序列,它定义了允许非均匀
实现一个Vue自定义指令懒加载的方法示例

在项目中如果有大量的图片需要加载的时候,就可以考虑使用懒加载了,懒加载其实就是监听浏览器的滚动,当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听.实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自带的就够用了,大型复杂的项目的可能用的多. 什么是图片懒加载当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载. 比如我们加载
浅谈Redis变慢的原因及排查方法

目录原因1:实例内存达到上限原因2:开启内存大页原因3:使用Swap 原因4:网络带宽过载原因5:其他原因原因1:实例内存达到上限排查思路如果你的 Redis 实例设置了内存上限 maxmemory,那么也有可能导致 Redis 变慢. 当我们把 Redis 当做纯缓存使用时,通常会给这个实例设置一个内存上限 maxmemory,然后设置一个数据淘汰策略.而当实例的内存达到了 maxmemory 后,你可能会发现,在此之后每次写入新数据,操作延迟变大了. 导致变慢的原因当 Red
浅谈Scala的Class、Object和Apply()方法

Scala中如果一个Class和一个Object同名,则称Class是Object的伴生类.Scala没有Java的Static修饰符,Object下的成员和方法都是静态的,类似于Java里面加了Static修饰符的成员和方法.Class和Object都可以定义自己的Apply()方法,类名()调用Object下的Apply()方法,变量名()调用Class下的Apply()方法. class ApplyTest{ def apply() { println("This is a class,
浅谈几种常用的JS类定义方法

// 方法1 对象直接量 var obj1 = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : function(v) { this.v1 = v; } }; // 方法2 定义函数对象 var Obj = function() { var v1 = ""; this.get_v1 = function() { return this.v1; }; this.set_v1 = function

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

相关推荐

随机推荐