如何在刀片模板 laravel 中使用单个文件 vue 组件？

Posted 2023-02-23

【中文标题】如何在刀片模板 laravel 中使用单个文件 vue 组件？

【英文标题】：How to use a single file vue component in blade template laravel?

【发布时间】：2018-12-08 07:26:27

【问题描述】：

我有一个简单的表格组件。

<template>
<div>
    <table class="table table-bordered table-responsive">
        <thead>
        <tr>
            <th v-for="column in headers">column</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="(row, index) in data">
            <td>index + 1</td>
            <td v-for="column in row">column</td>
        </tr>
        </tbody>
    </table>
</div>
</template>
<script>
    export default 
        name: "simple-table",
        props: ['headers', 'data']
    
</script>

<style scoped>

</style>

我想在我的 laravel 刀片模板文件中使用它。对于全球注册，我尝试过：

import Vue from 'vue'


window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');  

Vue.component('simple-table', require('./components/SimpleTable'));

在我的刀片模板中：

<div id="people">
     <simple-table :data="tableData" :headers="columns">
     </simple-table>
</div>
........

 <script>

    const url = "url(sprintf("/api/admin/employees/%s/salary-history", $employee->id))";


    new Vue(
        el: "#people",            
        data: 
            columns: ['id', 'name', 'age'],
            tableData: [
                 id: 1, name: "John", age: "20" ,
                 id: 2, name: "Jane", age: "24" ,
                 id: 3, name: "Susan", age: "16" ,                 
            ]                
        
    );




</script>

但这显示了错误： [Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

为了在本地注册组件，我使用了以下方法：

//app.js
import SimpleTable from './components/SimpleTable'
window.SimpleTable = SimpleTable

然后在我尝试使用的刀片模板中注册它

....
components: 
   'simple-table': window.SimpleTable

但我仍然遇到同样的错误。如果我控制台日志 window.SimpleTable 它显示为未定义

我正在使用带有默认配置的 laravel mix。我做错了什么？

【问题讨论】：

components: 'simple-table': window.SimpleTable 和import SimpleTable from './components/SimpleTable' window.SimpleTable = SimpleTable 使用Vue.component('simple-table', require('./components/SimpleTable'));时不需要*

我尝试在全局和本地注册我的组件，但不能同时注册。首先，我在全球注册。它没有用。然后我在本地注册。还是不行。

【参考方案1】：

您是否运行npm run dev 来编译 javascript 文件？

（blade 中的任何内容都会自动执行，但 ./resources/assets/js 中的任何内容都不会）