Vue.js 단일 파일 컴포넌트 로드

Vue.js 단일 파일 컴포넌트 로드

Vue.js는 처음이라 단일 파일 구성 요소를 사용하고 싶은데 워크플로우를 이해할 수 없습니다.

예를 들어 다음과 같은 3가지 컴포넌트가 있습니다.App,Grid그리고.List

App.vue

<template>
    <div id="app">
        <div id="grid"></div>
        <div id="right"></div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue!'
            }
        }
    }
</script>

Grid.vue

<template>
    <div id="left"></div>
</template>

<script>
    export default {
        name: 'grid',
        data: function () {
            return {
                grid: 'some-data'
            }
        }
    }
</script>

List.vue

<template>
    <div id="right"></div>
</template>

<script>
    export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    }
}
</script>

Main.js

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

new Vue({
    el: '#app',
    render: h => h(App)
});

new Vue({
    el: '#grid',
    render: h => h(Grid)
});

new Vue({
    el: '#right',
    render: h => h(PatternList)
});

동작하지만, 이것이 네스트된 컴포넌트를 작성하는 올바른 방법이 아니었으면 합니다.

누가 어떻게 해야 하는지 보여줄 수 있나요?고마워요.

다음 방법으로 컴포넌트를 등록할 수 있습니다.

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

Vue.component('grid', Grid);
Vue.component('pattern-list', PatternList);

new Vue({
  el: '#app',
  render: h => h(App)
});

그리고 나서 그것들을App태그 이름을 직접 사용하여 템플릿을 만듭니다.

<template>
  <div id="app">
    <grid></grid>
    <pattern-list></pattern-list>
  </div>
</template>

그러면 구성 요소가 글로벌하게 등록됩니다. 즉, Vue 인스턴스는 추가 설정 없이 해당 구성 요소를 템플릿에 추가할 수 있습니다.

---

다음과 같이 구성 요소를 Vue 인스턴스에 등록할 수도 있습니다.

new Vue({
  el: '#app',
  render: h => h(App),
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});

또는,script단일 파일 구성 요소의 태그:

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

export default {
  name: 'app',
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});
</script>

그러면 해당 Vue 인스턴스에만 구성 요소가 등록되므로 등록된 구성 요소는 해당 Vue 인스턴스에 대한 템플릿 내에서만 사용할 수 있습니다.하위 구성 요소도 하위 Vue 인스턴스에 등록되지 않으면 하위 구성 요소에 액세스할 수 없습니다.

언급URL : https://stackoverflow.com/questions/44568323/vue-js-loading-single-file-components