Question

很抱歉，我是laravel的新手，有才能构建Single Page Application。我做了很多试验，但仍然无法正常工作

我真的很想将vue组件导入另一个vue组件中，这就是“嵌套组件”。
但是当我保存为什么npm run watch工作正常时，给我一个关于“找不到此相对模块”的错误

这将从名为 Hello.vue

的“资源/ js /组件”组件中导入

<template>
<h1> hello </h1>
</template>

<script>
export default {
  name:'Hello'
}
</script>

这将获得导入Hello.vue

<template>
<h1> world</h1>
</template>

<script>

import Hello from './js/component/Hello

export default {
  name:'Hello'
}
</script>

任何帮助将不胜感激。在此先感谢：-）

Answer 1

您要问的是Recursive Components。

使用递归组件时，您不需要导入它们，因为它们是您要使用的组件。您只需要确保它具有name并且组件模板中的元素与该名称匹配（不区分大小写

<template>
    <div>
        <h1>hello</h1>

        <hello></hello>
    </div>
</template>

<script>
    export default {
        name: 'Hello'
    }
</script>

上面的代码实际上会导致错误，因为它实际上是在创建一个无限循环，因此您需要在组件中设置一些条件来防止这种情况，例如

<template>
    <div>
        <h1> hello </h1>

        <hello v-if="showNested" show-nested="false"></hello>
    </div>
</template>

<script>
    export default {

        props: {
            showNested: {
                default() {
                    return true;
                }
            }
        },

        name: 'Hello'
    }
</script>

很明显，我想您会知道为什么要嵌套组件，以便可以相应地编写逻辑。

对于您遇到的错误，我想这是由于您为导入提供了路径。

在使用require或import时，.指向当前目录，因此假设Hello组件的路径为：

resources/js/component/Hello.vue

您实际上已经尝试导入：

resources/js/component/js/component/Hello

现在这几乎是没有问题的，但我想指出一遍。

如何修复Laravel + Vue中的“找不到此相对模块”

1 个答案: