Laravel框架使用Vue2组件

最新推荐文章于 2025-07-27 13:23:08 发布

゛人生若只如初见°

最新推荐文章于 2025-07-27 13:23:08 发布

阅读量289

点赞数 5

CC 4.0 BY-SA版权

分类专栏： PHP # Laravel 源码文章标签： laravel php

本文链接：https://blog.csdn.net/weixin_48195625/article/details/143419277

PHP 同时被 3 个专栏收录

62 篇文章

订阅专栏

Laravel

38 篇文章

订阅专栏

源码

7 篇文章

订阅专栏

环境

laravel版本：8.83.27
vue版本: 2.7.0

安装laravel

composer create-project laravel/laravel test

安装auth脚手架及Vue2相关依赖

// 依次执行以下命令
composer require laravel/ui
php artisan ui vue --auth
npm install && npm run dev

Tip: 可参考：Laravel框架使用Auth进行用户认证

创建Vue组件

在 resources/js/components 目录下创建需要的 Vue组件

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ content }}</div>

                    <div class="card-body">
						我是一个测试内容
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
           return {
               content : '',
           }
        },
        mounted() {

        }
    }
</script>

注册Vue组件

在 resources/js/app.js 文件中注册刚才生成的 Vue组件，并创建实例。例如：

// 注册组件
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

// 创建实例
const app = new Vue({
    el: '#app',
});

调用Vue组件

然后我们在需要的 blade模板文件 里面就能直接调用这个 Vue组件 了，以绑定的路由为一套闭合标签。例如：

<example-component></example-component>

传参

blade模板文件 传递数据为数组的时候，需要先转化成 json字符串。

<example-component msg="{{ $msg }}" article_list={{ json_encode($item) }}></example-component>

Vue组件 页面 props 属性来接受这些参数。

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ content }}</div>

                    <div class="card-body">
                        <ul>
                            <li v-for="(item, index) in articles" :key="index">
                                {{ index }}-{{ item }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props : [
            'msg',
            'article_list',
        ],
        data() {
           return {
               content : '',
               articles : [],
           }
        },
        mounted() {
            this.content = this.msg;
			// 把json字符串转化成数组
            this.articles = JSON.parse(this.article_list);
        }
    }
</script>