Rumah > hujung hadapan web > tutorial js > 如何通过全局方法使用Vue.use()组件

如何通过全局方法使用Vue.use()组件

亚连
Lepaskan: 2018-06-21 19:08:56
asal
2964 orang telah melayarinya

本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

简介

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) {
  // 逻辑...
 }
}
Salin selepas log masuk

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

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
Salin selepas log masuk

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

Vue.use(MyPlugin, { someOption: true })
Salin selepas log masuk

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)
Salin selepas log masuk

实例:实现一个children组件

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

import childModule from './components/children'
Vue.use(childModule)
Salin selepas log masuk

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

|-components
  |-children
    |-index.js 导出组件,并且install
    |-children.vue (定义自己的组件模板)
Salin selepas log masuk

children.vue代码如下:

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

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在React中如何实现组件内部通信

在jQuery中如何实现动态数据分页

在AngularJS中有关于MVC的复杂操作

Atas ialah kandungan terperinci 如何通过全局方法使用Vue.use()组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan