Vue.js
プラグイン

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript
サーチ…


前書き

Vueプラグインは、グローバルメソッド、ディレクティブ、トランジション、フィルタ、インスタンスメソッド、オブジェクトとしてグローバル機能を追加し、mixinを使用していくつかのコンポーネントオプションを注入します

構文

  • MyPlugin.install = function（Vue、options）{}

パラメーター

名説明
ビュー Vueによって注入されたVueコンストラクタ
オプション必要に応じて追加オプション

備考

ほとんどの場合、Vueにプラグインを使用するよう明示する必要があります

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

オプションを渡すには

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

シンプルロガー

//myLogger.js
export default {

  install(Vue, options) {
     function log(type, title, text) {
       console.log(`[${type}] ${title} - ${text}`);
     }

     Vue.prototype.$log = {
       error(title, text) { log('danger', title, text) },
       success(title, text) { log('success', title, text) },
       log
     }
  }
}

メインのVueインスタンスがプラグインを登録する前に

//main.js
import Logger from './path/to/myLogger';

Vue.use(Logger);

var vm = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

これで、任意の子コンポーネントのthis.$logを呼び出すことができますthis.$log 

//myComponent.vue
export default {
  data() {
    return {};
  },
  methods: {
    Save() {
      this.$log.success('Transaction saved!');
    }
  }
}


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow