So verwenden Sie die Vue.use()-Komponente über die globale Methode

Dieser Artikel stellt hauptsächlich die benutzerdefinierte globale Komponente von Vue und ihre Verwendung durch die globale Methode Vue.use() vor. Interessierte Freunde können darauf verweisen

Einführung

Vue.use(plugin): Installieren Sie das Vue.js-Plugin. Wenn das Plugin ein Objekt ist, muss die Installationsmethode bereitgestellt werden. Wenn das Plugin eine Funktion ist, wird es als Installationsmethode verwendet. Die Installationsmethode wird als Parameter für Vue aufgerufen.

Wenn die Installationsmethode mehrmals vom selben Plug-in aufgerufen wird, wird das Plug-in nur einmal installiert.

Vue.js-Plugins sollten über eine öffentliche Installationsmethode verfügen. Der erste Parameter dieser Methode ist der Vue-Konstruktor und der zweite Parameter ist ein optionales Optionsobjekt:

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) {
  // 逻辑...
 }
}

Verwenden Sie das Plugin über die globale Methode Vue.use():

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

Also You kann ein Optionsobjekt übergeben:

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

Vue.use verhindert automatisch mehrere Registrierungen desselben Plug-Ins und das Plug-In wird nur einmal registriert.

Einige offiziell von Vue.js bereitgestellte Plug-Ins (z. B. vue-router) rufen automatisch Vue.use() auf, wenn sie erkennen, dass Vue eine zugängliche globale Variable ist. In einer Modulumgebung wie CommonJS sollten Sie Vue.use() jedoch immer explizit aufrufen:

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

Beispiel: Implementieren Sie eine untergeordnete Komponente

in main How Um diese Komponente in js zu verwenden:

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

Die Verzeichnisstruktur des Komponentenordners ist wie folgt:

|-components
　　|-children
　　　　|-index.js 导出组件，并且install
　　　　|-children.vue （定义自己的组件模板）

children.vue-Code lautet wie folgt:

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

Auf diese Weise , ein Vue wird implementiert .use ruft eine globale Komponente auf.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die interne Komponentenkommunikation in React

So implementieren Sie dynamisches Daten-Paging in jQuery

Es gibt komplexe Vorgänge zu MVC in AngularJS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Vue.use()-Komponente über die globale Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!