README

一个辅助包，用于帮助在非单页应用（SPA）的 Laravel 环境中工作与 Vue 组件。此包使得注入特定页面的 Vue 组件变得简单。

有时我们遇到的情况是项目并未广泛使用 Vue，但某些页面可能非常需要它。本包旨在解决这些场景，并使您能够（可选地）直接从您的 PHP 后端包裹特定的 Vue 组件。

您何时会使用这个包？

当构建多页应用时，通常需要在特定页面注入一些 Vue 的魔法。然而，随着项目的增长，个别脚本标签往往变得难以控制，变得难以管理。

这个包是如何工作的？

该包实现了一个新的 Blade 指令，您可以在 Blade 模板中安全地使用它来包裹输出的内容。通过使用这个新的指令，您能够将自定义的、特定页面的 Vue 组件注入到任何页面中，同时保持脚本模块化，从而便于管理。

安装

注意 - 对于使用 Laravel 5.2 或更早版本 的用户：请使用 v1.0.2 版本！！！

通过 composer 安装此包

$ composer require riverskies/laravel-vue-component

如果您正在运行 Laravel 5.4 或更早版本，请将服务提供者添加到您的 config/app.php 文件中

Riverskies\Laravel\VueComponent\VueComponentServiceProvider::class,

使用方法

在布局文件中使用新的指令包裹您的输出块

<div id="app">
    @vue($component)
        @yield('content')
    @endvue
</div>

如果您在视图中设置了 $component 变量...

return view('pages.home', ['component' => 'homepage']);

...则 content 将被包裹在一个动态的 Vue 组件中

<component is="homepage" inline-template v-cloak>
    <!-- yielded content -->
</component>

要动态注入主页组件，您需要在根 Vue 实例上设置组件（homepage）。例如，您的 app.js 文件可能看起来像这样

import Homepage from './pages/homepage.js';

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

示例

1. 简单页面注入

这是一个示例，说明您如何将 blade 模板连接到 Vue 页面实例。考虑以下场景...

在您的控制器方法中

return view('pages.contact', ['component' => 'contact']);

在您的 pages.contact.blade 文件中（注意包裹的 <div> 和转义的 @{{ ... }} 语法）

@section('content')
    <div class='contact-page'>
        <h1>Contact us</h1>
        
        <ul class="errors" v-if="errors.length > 0">
            <li v-for="error in errors">@{{ error }}</li>
        </ul>
        
        <form @submit.prevent='submitForm'>
            <input v-model="email"/>
            <textarea v-model="message">@{{ message }}</textarea>
            <button type='submit'>Submit</button>
        </form>
    </div>
@endsection

在您的 pages/contact.js 文件中

export default {
    data() {
        return {
            email: '',
            message: '',
            errors: []
        }
    },
    methods: {
        submitForm() {
            // your code to verify/send form data
        }
    }
}

并且您的 app.js 主文件应该是这样的

import Contact from './pages/contact.js';

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

通过以上方式，您成功地将 VueJS 控制器注入到您的联系页面中。

2. 通过数据发送

基于示例 1，您也可以从后端直接发送数据。考虑以下场景...

在您的控制器方法中

// in your controller method
return view('welcome', [
    'component' => [
        'is' => 'contact',
        'data' => [
            'email' => 'john@example.com'
        ]
    ]
]);

在您的 pages/contact.js 文件中

export default {
    props: ['data'],
    data() {
        return {
            email: '',
            message: '',
            errors: [],
            ssData: null
        }
    },
    created() {
        // you must evaluate passed through data!
        this.ssData = eval(this.data);
        
        this.email = this.ssData.email;
    },
    methods: {
        submitForm() {
            // your code to verify/send form data
        }
    }
}

此方法可用于从后端直接发送数据。