Vueを使用して天気コンポーネントをロードする方法の詳細な説明

<テンプレート>
    <div id="セーター">
        <div id="weather-view-he" ref="天気"></div>
        <remote-script src="天気ネットワークで生成されたコード内のスクリプト src"></remote-script>
    </div>
</テンプレート>
<スクリプト>
window.WIDGET = {ID: '123456'}; // WIDGET の前にウィンドウを追加します。そうしないと、この変数を読み取ることができません。import Vue from 'vue'
Vue.component('remote-script', { // vue は動的にスクリプトを生成します (html のコンポーネントとして使用されます)
    レンダリング: 関数 (createElement) {
        var self = this;
        createElement('script', を返す。
            属性: {
                タイプ: 'text/javascript',
                ソース: this.src
            },
            の上： {
                ロード: 関数 (イベント) {
                    self.$emit('load', イベント);
                },
                エラー: 関数 (イベント) {
                    self.$emit('error', イベント);
                },
                readystatechange: 関数 (イベント) {
                    this.readyState == '完了'の場合{
                        self.$emit('load', イベント);
                    }
                }
            }
        });
    },
    小道具: {
        ソース: {
            タイプ: 文字列、
            必須: true
        }
    }
})
エクスポートデフォルト{
    名前:"天気",
    データ（）{
        戻る {
           
        }
    },
}
</スクリプト>