Question

我尝试从工作版本更改.vue文件（与laravel一起使用）的结构，如下所示：

老foo-component.vue：

<script>
    Vue.component("foo-component", {
      data() {
      },

      props: {
      },

      methods: {
        },
      template: `
            <div> Some Content Here </div>
            `
    });
</script>

将其切换到.vue文件的其他结构：

新功能：foo-component.vue：

<template>
        <div> Some Content Here </div>
    </template>

    <script>
        export default {
          name: 'foo-component',
          data() {
          },

          props: {
          },

          methods: {

          },
        }
    </script>

OLD：主app.js：

Vue.component('foo-component', require('./components/foo-component.vue').default);

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

新功能：主要app.js：

Vue.component('foo-component', require('./components/foo-component.vue').default);

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

但是这样，我在浏览器中收到一条错误消息：

[Vue warn]: Unknown custom element: <foo-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

然后我在组件中添加了'foo-component'：{OtherComponents，foo-component}，但随后情况变得一团糟，浏览器在说：

Error: Module build failed: SyntaxError: X:/laragon/www/project/resources/assets/js/app.js: Unexpected token, expected , (38:35)

我在做什么错？

这是HTML / View，我将laravel刀片中的foo-component称为home.blade.php：

<html>
<head>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

<body>
    <div id="app">
            <foo-component></foo-component>
    </div>
    <script src="{{ mix('/js/app.js') }}"></script>
</body>

Answer 1

您必须在app.js

中注册组件

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

Answer 2

我起作用的方式是对app.js的更新：

Vue.component('foo-component', require('./components/foo-component.vue').default);

import FooComponent from './components/foo-component.vue';

const app = new Vue({
    el: '#app',
    components: {
        OtherComponents,
        'foo-component': FooComponent
            },
    data:{
    },
    methods: {
    }
});

.Vue-File：将结构从“模板：”迁移到<template> </template>

2 个答案: