使用 laravel 在 Vue JS 中调用动态组件答案

【问题标题】：Calling dynamic components in Vue JS with laravel使用 laravel 在 Vue JS 中调用动态组件
【发布时间】：2017-10-08 02:10:21
【问题描述】：

我正在尝试在 Laravel 5.4 和 Vue JS 2.0 上构建应用程序我有一组 components 仅在特定页面中使用，现在我正在全局定义组件并使用刀片文件中的组件标签，正如我所说的很多组件没有用，所以我的混合文件越来越大，我认为这可能会减慢我的页面渲染速度。我正在寻找一种可以在刀片文件中动态调用组件的解决方案。以下是我的app.js 文件：

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'
});

我有一个 master blade 文件，其中包含以下 HTML 代码：

<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 我已经

@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

任何建议如何实现这一点。

【问题讨论】：

标签： laravel vue.js vuejs2 vue-component laravel-blade

【解决方案1】：

试试这个：

在 app.js 的同一级别创建一个新文件，例如 partial.js：

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

将 partial.js 添加到 gulpfile.js 中的 elixir webpack 中。应该是这样的：

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

然后在刀片文件中，您希望在 id='testing' 的 div 之间包含 'category' 标签

之后，像这样导入 partials.js 脚本：

<script src="/js/partials.js"></script>

我相信这里的导入必须在使用类别组件之后完成。

你的分类页面应该是这样的：

@extends('layouts.master')

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

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

尝试一下，让我知道，这就是我过去解决类似问题的方法。干杯！

【讨论】：