PHP에서 VueJS 구성 요소 활용

Question

VueJS를 사용하지 않고도 Php와 VueJS 구성 요소에서 생성된 기본 HTML을 가장 낮은 dom 리프까지 혼합하고 싶습니다.

상위 레이아웃에는 Vue 애플리케이션이 적용되어 있고 모든 헤더, 탐색, 사이드바 등은 Vue 구성 요소이며 대부분의 페이지의 주요 콘텐츠는 여전히 PHP에서 생성된 순수 HTML입니다.

Vue 구성 요소로 주요 콘텐츠의 작은 부분을 업그레이드하고 싶지만 HTML을 사용하면 사용할 수 없습니다.

으아아아

상위 DOM에서는 잘 작동하지만 일부 기본 HTML을 렌더링한 후에는 앱이 더 이상 아래 구성 요소를 채우지 않습니다.

Php는 스크립트 태그에서 JS를 렌더링할 수 있지만 가져오기는 사용할 수 없습니다.

Vue 인스턴스가 페이지의 어느 위치에 작성되었든 모든 标签视为 Cats 태그를 Cats 구성 요소로 처리하도록 하는 방법이 있나요?

지금까지 시도한 것:

• 비동기 구성 요소.
• 포털을 설치하는 포탈을 이용하세요.
• 다른 Vue 인스턴스를 생성하고 다른 ID에 마운트하세요.

어떤 아이디어가 있나요?

편집: 제가 물려받은 이 거대 기업에서 여러 UI 현대화 시도가 뒤죽박죽되어 방해를 받았을 수도 있는 일을 시도해 본 적이 있습니다. 그래서 나는 이 상황에 직면한 다른 사람들에게 이러한 가능성을 배제하지 않을 것입니다.

Answer 1

API 또는 기타 소스의 템플릿을 Vue 인스턴스에 동적으로 전달하는 경우. v-html 속성을 통해 이 속성에 액세스하는 방법이 있지만, 사용하기 전에 아래 설명을 확인하시기 바랍니다.

콘텐츠는 순수 HTML로 삽입되며 Vue 템플릿으로 컴파일되지 않습니다.

따라서 구성 요소 자체를 바인딩/렌더링하려고 하면 순수한 HTML이 아닙니다. 따라서 Vue의 템플릿 컴파일러에서는 처리되지 않습니다.

가능한 해결책은 전체 HTML 템플릿 대신 PHP API에서 구성 요소 이름과 속성을 가져올 수 있다는 것입니다.

Vue 컴파일 옵션을 사용하여 동일한 결과를 얻을 수도 있습니다. 데모는 다음과 같습니다 :

으아아아 으아아아

Answer 2

마지막으로 다음과 같은 설정 기능을 사용하여 전역 window.ExtraVue을 포함하는 빌드 구성에 JS 파일을 수동으로 추가해야 했습니다.

으아아아

그런 다음 PHP 스크립트 끝에서 설정 함수를 호출하세요.

으아아아

이제 설정 기능은 독립적이어야 하는 각 구성 요소에 대해 새로운 Vue 인스턴스를 생성할 수 있습니다.

이상적으로는 VueJS가 일치하는 태그를 구성 요소로 대체할 수 있다면 좋을 것입니다.