Vue.js加載單個文件組件

Question

我是Vue.js的新用戶，想要使用單個文件組件，但我不瞭解工作流程。

例如，我有三個組成部分：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) 
}); 

它的工作原理，但我希望這不是創建嵌套組件的正確途徑。

任何人都可以展示它應該完成的方式嗎？使用Vue.component method感謝

Answer 1

你可以註冊組件：

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實例。