Vue.js
プラグイン
サーチ…
前書き
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