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