グローバルメソッドを通じて Vue.use() コンポーネントを使用する方法

この記事では、主に vue のカスタム グローバル コンポーネントと、グローバル メソッド Vue.use() によるその使用法を紹介します。興味のある方は、

はじめに

Vue.use (プラグイン) を参照してください。 .js プラグイン。プラグインがオブジェクトの場合は、インストール メソッドを提供する必要があります。プラグインが関数の場合、それがインストール方法として使用されます。インストール メソッドは、Vue へのパラメーターとして呼び出されます。

同じプラグインによって install メソッドが複数回呼び出された場合、プラグインは 1 回だけインストールされます。

Vue.js プラグインにはパブリック メソッドのインストールが必要です。このメソッドの最初のパラメータは Vue コンストラクタで、2 番目のパラメータはオプションのオプション オブジェクトです:

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 は、同じプラグインの複数の登録を自動的に防止し、プラグインは 1 回のみ登録されます。

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)

例: 子コンポーネントを実装する

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 を通じてグローバル コンポーネントが呼び出されます。

上記は私があなたのためにまとめたものです。

関連記事:

Reactでコンポーネント内部通信を実装する方法

jQueryで動的データページングを実装する方法

AngularJSではMVCに関する複雑な操作があります

以上がグローバルメソッドを通じて Vue.use() コンポーネントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。