Vue 2 - Ajax 응답에서 컴포넌트를 렌더링합니다.

Vue 2 - Ajax 응답에서 컴포넌트를 렌더링합니다.

ajax 응답에서 가져온 컴포넌트를 렌더링하는 방법이 있습니까?예를 들어 컴포넌트 "Test"를 등록하면 Ajax 응답에 다음과 같은 내용이 있습니다.

<p>dummy paragraph</p>
<test></test> <!-- vue component I want to render -->
<p>another dummy paragraph</p>

최종 목표는 사용자가 콘텐츠 영역에 라우터 링크를 삽입할 수 있는 쇼트 코드를 만드는 것입니다.

Vue 2, vue 라우터를 사용하고 있습니다.

편집: 여기 데모 https://jsfiddle.net/Paulius_Krutkis/4mb1ypqs/가 있습니다.

여기서 당신이 직면하고 있는 정확한 문제가 무엇인지 잘 모르겠습니다.만약 당신이 ajax 호출에서 반환된HTML을 어떻게 렌더링하는지를 찾고 있다면 HTML을 가진 문자열 변수를 렌더링할 수 있는 v-html을 사용할 수 있습니다.

단, 다음 점에 주의해 주십시오.

내용은 플레인 HTML로 삽입되며 Vue 템플릿으로 컴파일되지 않습니다.

그렇게v-html에서는 예상대로 vue 컴포넌트가 컴파일 및 렌더링되지 않습니다.다른 솔루션을 찾아야 할 수도 있습니다.

---

얼터넷 웨이

그러나 말씀하신 것처럼 Ajax 응답에서 가져온 컴포넌트를 렌더링하는 방법이 필요합니다.Async-Components는 컴포넌트 정의를 비동기적으로 해결하는 공장 함수로 정의할 수 있습니다.

데모를 보려면 https://jsfiddle.net/4mb1ypqs/1/를 방문하십시오.

네, 방법이 있어요.다음의 순서에 따릅니다.

1. 컴포넌트(Ajax 응답으로 송신)를 글로벌하게 등록합니다.

import Vue from 'vue'
import Test from './some/folder/Test.vue'

Vue.component('dummy name', Test)

2. 창 개체에 Vue를 추가하거나 내보내서 필요한 위치로 가져올 수 있습니다.여기서는 브라우저 콘솔 내에서 쉽게 액세스할 수 있도록 글로벌 창 개체에 추가합니다.

window.Vue = Vue

3. 컴파일되지 않은 DOM 요소를 사용하여 ajax 응답을 받은 경우(<test></test>DOM 에 직접 삽입해 컴파일 할 것인지, 컴파일 할 것인지, 먼저 컴파일 하고 나서 DOM 에 마운트 할 것인지를 결정할 수 있습니다.예를 들어 컴포넌트템플릿을 DOM에 직접 삽입했다고 합니다.래퍼 요소에 주목해 주세요.

<p>dummy paragraph</p>
<div id="testapp">
  <test></test>
</div>
<p>another dummy paragraph</p>

4. 새 Vue 인스턴스를 생성하고 마운트 위치를 알려줍니다.테스트 컴포넌트는 이미 글로벌하게 등록되어 있기 때문에 vue는 테스트 컴포넌트의 외관을 파악하고 DOM에 컴파일하면 컴파일합니다.또는 "구성요소" 속성 내에 추가할 수도 있습니다.

new window.Vue({
    el: '#testapp',
})

5. 알았어!

정보: 루트 vue 인스턴스가 처음 마운트된 경우 VueDevtools에서 컴파일된 새 구성 요소를 인식하지 않습니다.이를 작동시키려면 새로 생성된 인스턴스에 부모 인스턴스에 속함을 통지해야 합니다.

var vm = new Vue({ 
  el: '#app',
});

new window.Vue({ 
  el: '#testapp', 
  parent: vm,
});

주의: 새 vue 인스턴스는 다른 인스턴스와 데이터를 공유하지 않습니다.이 접근방식은 데이터를 개별적으로 서버에 송신하기 위해서만 존재하는 텍스트 입력 컴포넌트 등 독립된 컴포넌트가 있는 경우에만 「의미」가 있습니다(물론 이 순서의 전체는 권장되지 않습니다).

누군가 도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/40695546/vue-2-render-components-from-an-ajax-response