laravelでVue JSで動的コンポーネントを呼び出す

Question

Laravel 5.4とVue JS 2.0でアプリケーションを作成しようとしていますcomponentsのセットを特定のページでのみ使用していますが、今ではコンポーネントをグローバルに定義していますブレードファイル内のcomponentsタグを使用して、私はロットコンポーネントが役に立たないと言っていたので、私のミックスファイルが大きくなり、これがページレンダリングを遅くするかもしれないと思います。私はブレードファイルでコンポーネントを動的に呼び出すことができるソリューションを探しています。私は、次のHTMLコードを持ってmaster bladeファイルまし

Vue.component('NavBar', require('./components/NavBar.vue')); 
Vue.component('HomeBanner', require('./components/HomeBanner.vue')); 
Vue.component('PageFooter', require('./components/Footer.vue')); 
Vue.component('Categories', require('./components/Categories.vue')); 
Vue.component('SubCategory', require('./components/SubCategory.vue')); 

const app = new Vue({ 
    el: '#app' 
}); 

：以下は私のapp.jsファイルです

<div id="app"> 
    <nav-bar></nav-bar> 
    @yield('content') 
    <div class="clearfix"></div> 
    <page-footer></page-footer> 
</div> 

<!-- Core Scripts for Vue Components --> 
<script src="{{ asset('js/app.js') }}"></script> 

をしてindex.blade.phpに仮定をIまし

@extends('layouts.master') 

@section('title', 'HomePage') 

@section('content') 
    <home-banner></home-banner> 
@endsection 

とcategoriesページで私は持っている：

@extends('layouts.master') 

@section('title', 'Select your category') 

@section('content') 
    <categories></categories> 
@endsection 

これを達成する方法を教えてください。

Answer 1

これを試してみてください：

window.Vue = require('vue'); 
Vue.component('categories', require('./components/Categories.vue')); 
new Vue({ 
    el: '#testing' 
}); 

でエリキシルのWebPACKにpartial.jsを追加します。

は、これであなたのapp.jsの同じレベルのpartial.jsは、たとえば、新しいファイルを作成します。 gulpfile.js。次のようになります。

elixir(mix => { 
    mix.sass('app.scss') 
     .webpack('app.js') 
     .webpack('partial.js'); 
}); 

を次にブレード・ファイルで、あなたが、これはID =「テスト」は後

とdivの間の「カテゴリ」タグを囲む必要がありpartials.jsスクリプトをインポートしたいです

ここでは、カテゴリコンポーネントを使用してインポートする必要があると思います。

あなたのカテゴリページはこのように終わる必要があります。

@extends('layouts.master') 

@section('title', 'Select your category') 

@section('content') 
    <div id='testing'> 
     <categories></categories> 
    </div> 
    <script src="/js/partials.js"></script> 
@endsection 

はそれを試してみて、私に知らせて、それは私が過去に同様の問題を解決する方法です。乾杯！