JSファイルが外部にロードされている場合、Vueはコスポネントを登録できません

私は通常のjsファイル（.vueではなく）とインラインテンプレートでvueを使用しています。サブページに依存してロードされるコンポーネントはほとんどありません。私がしたいのは、いくつかのコンテナ（たとえば#blog）の長さが0より大きい場合、jQueryが追加のvue coponentsスクリプトをロードすることによって、グローバルvue変数とvue copeentsを読み込んで動的にロードすることです。JSファイルが外部にロードされている場合、Vueはコスポネントを登録できません

VueはVueタグが見つかりましたが、コンポーネントを登録できませんでした。

JSファイルを動的にロードする方法はありますか？私は、特定のサブページだけにロードしたいjsファイルがたくさんある本当に大きなWebサイトを持っています。それはすべてのjQueryライブラリで完璧に動作しますが、悲しいことにVueコンポーネントでは機能しません。以下

例コンポーネント：

Vue.component('blog-entries', { 
    name: "blog-entries", 
    template: require('js/vue/home/blog/blog.html').template, 
    data: function() { 
     return { 
      blog_entries: [ 

      ] 
     } 
    } 
});

とエラー：

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in)

負荷スクリプト：

function loadScript(scriptName, callback) { 

    if (!_arr[scriptName]) { 
     _arr[scriptName] = true; 

     var body  = document.getElementsByTagName('body')[0]; 
     var script  = document.createElement('script'); 
     script.type  = 'text/javascript'; 
     script.src  = scriptName; 

     // then bind the event to the callback function 
     // there are several events for cross browser compatibility 
     // script.onreadystatechange = callback; 
     script.onload = callback; 

     // fire the loading 
     body.appendChild(script); 

    } else if (callback) { 

     callback(); 

    } 

};

出典

2017-08-23 susanoo

var vapp = new Vue({ 
 
    el: '#app', 
 
    data: function() { 
 
    return { 
 
     componentName: '' 
 
    } 
 
    }, 
 
    computed: { 
 
    currentComponent: function() { 
 
     var vm = this; 
 
     if (!vm.componentName) return; 
 

 
     if (!vm.$options.components[vm.componentName] //if not registered locally 
 
      && !Vue.options.components[vm.componentName]) {//nor globally yet 
 

 
     //load the component async'ly 
 
     Vue.component(vm.componentName, function(resolve) { 
 
      //adjust the path to where your component files are 
 
      var filePath = 'https://tplen.com/vue-components/' + vm.componentName + '.vue.js'; 
 
      loadScript(filePath, resolve); 
 
     }); 
 
     } 
 
     return vm.componentName; 
 
    } 
 
    } 
 
}); 
 

 
/*below is your own third party script loader*/ 
 
var _arr = {}; 
 
function loadScript(scriptName, callback) { 
 

 
    if (!_arr[scriptName]) { 
 
     _arr[scriptName] = true; 
 

 
     var body  = document.getElementsByTagName('body')[0]; 
 
     var script  = document.createElement('script'); 
 
     script.type  = 'text/javascript'; 
 
     script.src  = scriptName; 
 

 
     // then bind the event to the callback function 
 
     // there are several events for cross browser compatibility 
 
     // script.onreadystatechange = callback; 
 
     script.onload = callback; 
 

 
     // fire the loading 
 
     body.appendChild(script); 
 

 
    } else if (callback) { 
 

 
     callback(); 
 

 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 

 
    <div id="app"> 
 
     <input v-model="componentName"> 
 
     <div :is="currentComponent"></div> 
 
    </div> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
    <script src="app.js"></script> 
 

 
    </body> 
 

 
</html>

メインアプリ（サブページをロードします1）では、このような何かを試してみてください：「ブログのエントリが」あなたのVueのコンポーネントの名前と「ブログのエントリと同じでなければなりません

Vue.component('blog-entries', function(resolve) { 
    loadScript('blog-entries.js', resolve); 
})

。 js 'は動的にロードするVueコンポーネントを含むjsファイルです。

編集：フォローアップのため、ここではvueコンポーネントを動的にロードするための完全なコードを記述します。コンポーネントは、ユーザーの入力時にすぐにロードされ、レンダリングされます。 "ant"、 "bird"、 "cat"と入力してみてください。これらの名前のvueコンポーネントをサーバーに配置しました。

出典

2017-08-24 01:02:30 elfan

'blog-entries' jsファイル全体が必要な場合は、これらのタグを利用できるようにするには他の方法がありますか？ – susanoo

コンポーネント名があらかじめ分かっていないのですか？はい、ハードコードされたものだけでなく、コンポーネント名を動的に読み込むことができます。上記の完全なデモコードを追加して私の答えを編集しました。 – elfan

JSファイルが外部にロードされている場合、Vueはコスポネントを登録できません

答えて

関連する問題