여러 Vue 구성 요소가 필요한 클리너 방법은 무엇입니까?

Question

저는 Vue.JS로 작업하기 시작했습니다. 작은 문제가 하나있어서 저를 괴롭 히고 있습니다. 내 main.js에서 다음

+ js 
|--+ components 
| |-- parent.vue 
| |-- child.vue 
|-- main.js 

나는 다음과 같은 한 : 다음과 유사한 내 파일 구조

window.Vue = require('vue'); 
require('vue-resource'); 
Vue.component('parent', require('./Components/parent')); 
Vue.component('child', require('./Components/child')); 
var app = new Vue({ el: "#app" }); 

(I 실제로 무엇 vue-resource 확실하지 않다, 그러나 이것은 위해 설립되었다 나에게 Laravel 5.3을 새로 설치하여)

너무 많은 구성 요소를 추가하면 main.js 파일이 관리하기 어려워졌습니다. ReactJS로 작업 할 때 main.js는 "부모"컴포넌트 만 포함하고 상위 컴포넌트는 하위 컴포넌트를 포함하기 때문에이 문제는 발생하지 않습니다. Vue를 찾았습니다 .JS는 구성 요소를 구성하는 데 도움이되는 비슷한 트릭을 사용합니다. 그러나 찾지 못한 문서는 읽지 못했습니다.

에는 Vue가 있습니다. (Browserify/Webpack이 번들로 제공) 또는은 디렉토리의 모든 파일에 대해 재귀 적으로 javascript 문을 실행합니다 (따라서 Browserify/Webpack은 모든 것을 압축합니다).

저는 현재 비동기 구성 요소에 관심이 없습니다. 따라서 솔루션에서 해당 기능을 중단해도 괜찮습니다. 언젠가는 Webpack을 사용하여 비동기 구성 요소를 만들고 필요에 따라로드하는 것만으로도 놀고 싶지만, 오늘은 Vuex를 재생할 수 있도록이 작업을 수행하는 데 더 관심이 있습니다.

Answer 1

Vue.component 구문은 다른 구성 요소 내부에서 사용되는 구성 요소를이있는 경우, 세계 유일의 구성 요소입니다 :

import Parent from './components/Parent.vue'; 
import Child from './components/Child.vue'; 

new Vue({ 
    el: "#app", 
    components: { Parent, Child } 
}); 

이 구성 요소의 내부는 다른 구성 요소를 사용할 수 있습니다보다.

Vue.component(Parent)을 사용할 때의 유일한 이점은 암시 적으로 선언하지 않고 다른 모든 구성 요소에서이 <parent></parent> 구성 요소를 globaly로 사용할 수 있다는 것입니다.

행운을 빕니다 :) 당신은 최상위 수준에 모든 것을 가져올 필요가 없습니다

Answer 2

. 에서

당신의 main.js 당신은 당신의 Child.vue

<template> 
    <p>I am the child</p> 
</template> 

<script> 
    export default { 
    mounted() { 
     console.log('mounted child') 
    } 
    } 
</script> 

<style scoped> 
    // ... 
</style> 

에 그런 다음 Parent.vue

<template> 
    <div> 
    <p>I am the parent</p> 
    <child></child> 
    </div> 
</template> 

<script> 
    import Child from './Child.vue' 

    export default { 
    mounted() { 
     console.log('mounted parent') 
    } 
    } 
</script> 

<style scoped> 
    // ... 
</style> 

으로 부모 구성 요소

import Parent from './components/Parent.vue' 

new Vue({ 
    el: "#app", 
    components: { 
    Parent 
    } 
}) 

를 가져올 수 있습니다 그리고 당신은

와 끝까지해야한다

<div> 
    <p>I am the parent</p> 
    <p>I am the child</p> 
</div>