本文例項為大家分享了載入天氣元件的使用方法，供大家參考rnulFHLpA，具體內容如下

首先我們進入中國天氣網生成一段程式碼

根據需要設定天氣樣式

複製並修改生成的這段程式碼到vue中

將script引入 修改為vue的動態引入方法

<template>
    <div id="weater">
        <div id="weather-view-he" ref="weather"></div>
        <remote-script src="天氣網生成程式碼中script的src"></remote-script>
    </div>
</template>
<script>
window.WIDGET = {ID: '123456'};   // 將WIDGET前邊加上window 否則讀取不到此變數
import Vue from 'vue'
Vue.component('remote-script',{   // vue動態生成script (在html中當成元件來用)
rnulFHLpA
 
    render: function (createElement) {
        var self = this;
        return createElement('script',{
            attrs: {
                type: 'text/',src: this.src
            },rnulFHLpA       on: {
                load: function (event) {
                    self.$emit('load',event);
                },error: function (event) {
                    self.$emit('error',readystatechange: function (event) {
                    if (this.readyState == 'complete') {
                  http://www.cppcns.com
 
      self.$emit('load',event);
                    }
                }
            }
        });
    },props: {
        src: {
     www.cppcns.com       type: String,required: true
        }
    }
})
export default {
    name:"Weather",data(){
        return {
           
        }
    },}
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。