Vueプラグインの実装で発生した問題の概要

<テンプレート>
    <h2>{{ タイトル }}</h2>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
小道具: {
    タイトル：
        タイプ: 文字列、
        デフォルト： ''
    }
}
}
</スクリプト>

<テンプレート>
    <div>
        <TheHeader:title="タイトル" />
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ（） {
            タイトル： ''
        },
        作成された(){
            this.title = '私のホームページ'
        }
    }
</スクリプト>

<テンプレート>
    <div />
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        作成された(){
            this.$setHeader('マイホームページ')
        }
    }
</スクリプト>

'./TheHeader.vue' から TheHeader をインポートします。
'vue' から Vue をインポートします

定数ヘッダープラグイン = {
    インストール(Vue) {
        const vueInstance = new (Vue.extend(TheHeader))().$mount()
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = タイトル
            document.body.prepend(vueInstance.$el)
            
        }
    }
}
Vue.use(ヘッダープラグイン)

'./TheHeader.vue' から TheHeader をインポートします。
'vue' から Vue をインポートします

const vueInstance = new (Vue.extend(TheHeader))().$mount()
定数ヘッダープラグイン = {
    インストール(Vue) {
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = タイトル
            document.body.prepend(vueInstance.$el)
            
        }
    }
}
Vue.use(ヘッダープラグイン)

'./TheHeader.vue' から TheHeader をインポートします。
'vue' から Vue をインポートします

const vueInstance = new (Vue.extend(TheHeader))().$mount()
定数hasPrepend = false
定数ヘッダープラグイン = {
    インストール(Vue) {
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = タイトル
            if (!hasPrepend) {
                document.body.prepend(vueInstance.$el)
                先頭に追加 = true
            }
            
        }
    }
}
Vue.use(ヘッダープラグイン)

'./TheHeader.vue' から TheHeader をインポートします。
'vue' から Vue をインポートします

el = nullとする
定数ヘッダープラグイン = {
    インストール(Vue) {
        Vue.prototype.$setHeader = function(title) {
            ヘッダー.data = 関数() {
                タイトル
            }
            const vueInstance = new (Vue.extend(TheHeader))().$mount()
            el = vueInstance.$el
            もし（エル）{
                document.body.removeChild(el)
                document.body.prepend(el)
            }
            
        }
    }
}
Vue.use(ヘッダープラグイン)

Vue.extend = 関数 (extendOptions) {
    extendOptions = extendOptions || {};
    var Super = this;
    var SuperId = Super.cid;
    var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}); 
    if (cachedCtors[SuperId]) { // キャッシュがある場合は、キャッシュされたコンストラクタを直接返します return cachedCtors[SuperId]
    }

    var name = extendOptions.name || Super.options.name;
    process.env.NODE_ENV !== 'production' && name の場合 {
      コンポーネント名を検証します(名前);
    }

    var Sub = function VueComponent (オプション) {
      this._init(オプション);
    };
    Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    Sub.cid = cid++;
    サブオプション = mergeOptions(
      スーパーオプション、
      拡張オプション
    );
    Sub['super'] = スーパー;

    // プロパティと計算プロパティについては、プロキシゲッターを定義します
    // 拡張時のVueインスタンス、拡張プロトタイプ上。これは
    // 作成されたインスタンスごとに Object.defineProperty の呼び出しを回避します。
    if (Sub.options.props) {
      初期化プロパティ$1(Sub);
    }
    if (Sub.options.computed) {
      initComputed$1(Sub);
    }

    // さらなる拡張機能/ミックスイン/プラグインの使用を許可する
    Sub.extend = Super.extend;
    Sub.mixin = Super.mixin;
    Sub.use = Super.use;

    // 資産レジスターを作成するので、拡張クラス
    // プライベートアセットも持つことができます。
    ASSET_TYPES.forEach(関数(型) {
      サブ[タイプ] = スーパー[タイプ];
    });
    // 再帰的な自己検索を有効にする
    if (名前) {
      Sub.options.components[名前] = Sub;
    }

    // 拡張時にスーパー オプションへの参照を保持します。
    // 後でインスタンス化するときにSuperのオプションが
    // 更新されました。
    Sub.superOptions = Super.options;
    Sub.extendOptions = extendOptions;
    Sub.sealedOptions = extend({}, Sub.options);

    // キャッシュコンストラクタ
    cachedCtors[SuperId] = Sub; // Ctorコンストラクタがキャッシュされる場所です。 return Sub
  }

'./TheHeader.vue' から TheHeader をインポートします。
'vue' から Vue をインポートします

el = nullとする
定数ヘッダープラグイン = {
    インストール(Vue) {
        Vue.prototype.$setHeader = function(title) {
            ヘッダー.data = 関数() {
                タイトル
            }
            ヘッダー.Ctor = {}
            const vueInstance = 新しい Vue(TheHeader).$mount()
            el = vueInstance.$el
            もし（エル）{
                document.body.removeChild(el)
                document.body.prepend(el)
            }
            
        }
    }
}
Vue.use(ヘッダープラグイン)

'./TheHeader.vue' から TheHeader をインポートします。
'vue' から Vue をインポートします

const vueInstance = 新しい Vue(TheHeader).$mount()
定数hasPrepend = false
定数ヘッダープラグイン = {
    インストール(Vue) {
        Vue.prototype.$setHeader = function(title) {
            vueInstance.title = タイトル
            if (!hasPrepend) {
                document.body.prepend(vueInstance.$el)
                先頭に追加 = true
            }
            
        }
    }
}
Vue.use(ヘッダープラグイン)