인스턴스가 생성된 후 Vue 인스턴스에 구성 요소 추가
VueJs 인스턴스를 이렇게 만든 경우...
var app = new Vue({ el: '#app', 구성 요소: {...} } )
인스턴스화된 이 인스턴스에 구성 요소를 추가할 수 있습니까?
제가 부탁드리는 이유는 템플릿을 응시할 수 있는 여러 페이지 앱이 있기 때문입니다.Vue 앱 인스턴스화는 공유 템플릿 코드로 하고 싶지만 각 페이지에서 다른 컴포넌트를 사용하여 연락처 페이지의 코드가 두 파일로 분할되도록 합니다.
Master.js Contact.js
contact.js 파일은 메인 앱에 콘트랙트 형식의 컴포넌트를 사용하고 싶다고 알려야 하는데, 그 컴포넌트는 다른 페이지에서 사용되지 않기 때문에 master.js의 초기 앱 선언에 추가하고 싶지 않습니다.
어떤 도움이라도 주시면 감사하겠습니다.
@thanksd덕분에
Vue를 인스턴스화할 때 컴포넌트만 등록하면 되는 것 같습니다.즉, Vue가 인스턴스화되기 전에 컴포넌트 코드가 입력되어 있는 한 컴포넌트를 등록할 필요가 없습니다.
master template와 master.js에는 이 내용이 포함될 수 있습니다.
<div id="app">
<header>Master header</header>
<contact-page inline-template>
Contents of contact page
</contact-page>
<footer>Master Footer</footer>
</div>
var app = new Vue({
el: '#app'
})
그러면 my contact.js에 이 내용이 포함될 수 있습니다.
Vue.component('contact-page', {
... Contact page specific code here...
});
여러 페이지, 레이아웃 등 여러 컴포넌트에 대해서도 비슷한 문제가 있었습니다.저희 시스템은 SPA가 아닙니다.각 페이지의 새로고침.페이지 내용은 서버 코드별로 일부 전역 옵션과 함께 전역 레이아웃에 삽입됩니다.
글로벌 컴포넌트가 있으며 페이지별로 좀 더 구체적입니다.솔루션은window잡다Vue페이지 단위로 구성 요소를 충전한 후 vue를 초기화합니다.
중요: 다음 주문 선언을 따르십시오: windowVue / 페이지 고유 코드 / startVue
예:
레이아웃 파일:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../js/windowVue.js"></script>
<!-- all header content -->
<!-- depend your system here call your js specific by page ex: productPage.js -->
<script type="text/javascript" src="../js/productPage.js"></script>
</head>
<body>
<div id="vueApp">
<!-- Your page content-->
</div>
<script type="text/javascript" src="../js/startVue.js"></script>
</body>
</html>
windowVue.js
import Vue from 'vue';
window.Vue = Vue;
product Page.js
// Here two options declare the external components only
import ComponentA from '../js/components/component-a.js';
import ComponentB from '../js/components/component-b.vue';
window.Vue.component('component-a', ComponentA)
window.Vue.component('component-b', ComponentB)
// Or if you use a page component with more logic and options you can declare here
// and include the other components as usual
window.Vue.component('product-page', {
components: {
ComponentA,
ComponentB
},
// rest of the code as usual
})
startVue.js
import GlobalA from '../js/components/global-a.js';
import GlobalB from '../js/components/global-B.js';
new window.Vue({
el:"#vueApp",
delimiters: ['${', '}'],
components: {
GlobalA,
GlobalB
}
})
이제 각 페이지에는 자체 컴포넌트가 있고 공유 컴포넌트도 몇 개 있습니다.
일부 비고:
- 3개의 js 부품을 개별적으로 구축합니다.
- windowVue.js만 사용
import Vue from 'vue'나머지 용도window.Vue. - .disc 파일컴포넌트가 오브젝트로 선언됩니다.
컴포넌트 a.displaces
import ComponentB from '../js/components/component-b.vue';
import ComponentC from '../js/components/component-c.vue';
import ComponentD from '../js/components/component-d.vue';
export default {
name:'component-a',
components: {
ComponentB,
ComponentC,
ComponentD
},
data() {
return {
variableExample: 'example'
}
} // more of your Vue code
}
언급URL : https://stackoverflow.com/questions/45593512/add-components-to-vue-instance-after-instance-is-created
'programing' 카테고리의 다른 글
| 입력 스트림을 두 번 읽습니다. (0) | 2022.07.11 |
|---|---|
| console.log()가 브라우저에 아무것도 기록하지 않는 이유는 무엇입니까? (0) | 2022.07.11 |
| Vue Mixin 계산 함수 통과 매개 변수 (0) | 2022.07.11 |
| Vue에서 cognito 사용자 세션을 유지하는 방법 (0) | 2022.07.11 |
| main(int argc, char *argv [ ] )에 대해서 (0) | 2022.07.11 |