Vueのグローバル機能を書く方法

Vue.jsでグローバル機能を記述する4つの方法があります。Vue.Prototype、グローバルミキシング、プラグイン、および提供/注入。

Vueでグローバル機能を書く

Vue.jsでは、さまざまな方法でグローバル機能を記述できます。

1。vue.prototype

Vue.Prototypeは、Vueインスタンスのプロトタイプオブジェクトであり、グローバル機能を作成するためのプロパティと方法を追加できます。例えば：

 <code class="js">Vue.prototype.myGlobalFunction = function () { // 全局函数的实现};</code>

2。グローバルを混ぜます

グローバルミックスはすべてのコンポーネントで使用できます。これを使用してグローバル機能を追加できます。 main.jsファイルを追加します：

 <code class="js">import Vue from 'vue'; import { myGlobalFunction } from './myGlobalFunction'; Vue.mixin({ methods: { myGlobalFunction, }, });</code>

3。プラグインを介して

プラグインは、グローバル機能を含むVUEインスタンスに追加機能を追加できます。 myplugin.jsという名前のファイルを作成し、それをエクスポートします。

 <code class="js">export default { install(Vue) { Vue.prototype.$myGlobalFunction = () => { // 全局函数的实现}; }, };</code>

main.jsファイルにプラグインをインストールします。

 <code class="js">import myPlugin from './myPlugin'; Vue.use(myPlugin);</code>

4。提供/注入

提供/注入により、親と子のコンポーネント間でデータと方法を渡すことができます。これを使用して、すべてのサブコンポーネントにグローバルな機能を提供できます。

 <code class="js">// 父组件<template> <my-child></my-child> </template> <script> export default { provide() { return { myGlobalFunction, // 全局函数}; }, }; </script> // 子组件<template> <button></button> </template> <script> export default { inject: [&#39;myGlobalFunction&#39;], }; </script></code>

以上がVueのグローバル機能を書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。