Question

正如标题所述，我仍然会指导您重现该问题。详细信息如下。

复制步骤

从Github克隆Laravel官方项目
安装Php和JavaScript的所有依赖项（节点）
- npm install-用于节点
- composer install-用于php

安装所有依赖项之后

打开resources/views/welcome.blade.php并将其编辑为下面的以下代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mix</title>

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

<body>

<div id="app">
  <h1>Hello, world!</h1>

  <example-component />
  <camel-case-component />
</div>

<script src="{{ mix('js/app.js') }}"></script>

</body>

</html>

打开resources/js/app.js并将其编辑为下面的以下代码

require('./bootstrap');

window.Vue = require('vue');

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

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

注意：不要忘记添加文件resources/js/components/CamelCaseComponent.vue

运行laravel混合npm run dev
php artisan serve服务您的应用程序，并使用任何浏览器http://127.0.0.1:8000/

就是这样。仅进行最小程度的修改。

Answer 1

尝试一下

<example-component></example-component>
<camel-case-component></camel-case-component>

代替

<example-component /> 
<camel-case-component />

我为每个组件使用了结束标签，而不是自闭合标签。

Answer 2

HTML

所以问题是HTML不允许自定义元素自动关闭。只有“官方无效”元素才能使用自动关闭；例如<example-component></example-component> <camel-case-component></camel-case-component>。

由于刀片模板需要有效的HTML，因此应将其更改为

<example-component />
<camel-case-component />

Vue模板

Vue模板已解析，因此它们不需要遵循官方的HTML语法。 Vue实际上建议在其他Vue组件中使用自动关闭标签。

如此

"/home/User"

在Vue模板中完全没问题。

有关此详情，您可以查看official Vue documentation

Laravel / VueJS-刀片内的多个组件无法正常工作

复制步骤

安装所有依赖项之后

2 个答案: