반응형
Laravel/VueJS - 블레이드 내부의 여러 구성 요소가 제대로 작동하지 않음
제목에 다 나와 있듯이, 나는 여전히 너에게 그 문제를 재현할 수 있도록 안내할 것이다.상세 내용은 아래에 있습니다.
재생산 단계
- 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애러벨 믹스를 가동하고
npm run dev- 당신의 앱을 제공하라.
php artisan serve브라우저를 사용하여 열기http://127.0.0.1:8000/
바로 그겁니다.최소 수정만 가능.
이것을 사용해 보십시오.
<example-component></example-component>
<camel-case-component></camel-case-component>
대신에
<example-component />
<camel-case-component />
나는 자폐 태그 대신 각 구성요소에 대해 닫는 태그를 사용했다.
HTML
그래서 문제는 HTML이 사용자 정의 요소를 스스로 닫는 것을 허용하지 않는다는 것이다."공식적 보이드" 요소만 자체 폐쇄를 사용할 수 있다.<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 설명서를 참조하십시오.
반응형
'IT이야기' 카테고리의 다른 글
| TypeScript 2.3에서 새로 추가된 지원을 사용하여 TypeScript에서 반응 어린이 유형을 어떻게 제한하십니까? (0) | 2022.03.28 |
|---|---|
| PYSONPATH에 디렉터리를 영구적으로 추가하시겠습니까? (0) | 2022.03.28 |
| Vuex를 사용하여 어레이의 개체를 업데이트하는 중 (0) | 2022.03.28 |
| 반응 - useState의 setter 기능을 변경할 수 있는가? (0) | 2022.03.28 |
| 각도2 처리 http 응답 (0) | 2022.03.28 |