S. *_*eng 1 laravel vue.js laravel-blade vue-component
正如标题所说的那样，我仍然会指导您重现该问题。详情如下。
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 mix， npm run dev
php artisan serve并使用任何浏览器打开它http://127.0.0.1:8000/就是这样。仅最小修改。
小智 6
尝试这个
<example-component></example-component>
<camel-case-component></camel-case-component>
代替
<example-component />
<camel-case-component />
我为每个组件使用了结束标记而不是自结束标记。
超文本标记语言
所以问题是 HTML 不允许自定义元素是自关闭的。只有“官方void”元素才能使用自关闭；<link href="style.css" />例如。
因为刀片模板需要是有效的 HTML，所以您应该将其更改为
<example-component></example-component>
<camel-case-component></camel-case-component>
Vue 模板
Vue 模板是经过解析的，因此它们不需要遵守官方的 HTML 语法。Vue 实际上建议在其他 Vue 组件中使用自关闭标签。
所以有
<example-component />
<camel-case-component />
在 Vue 模板中就完全没问题了。
有关这方面的更多详细信息，您可以查看Vue 官方文档
| 归档时间： |
|
| 查看次数： |
1944 次 |
| 最近记录： |