组件的局部注册

组件和组件名

在Vue实例中通过Vue.component({/.../})绑定的组件都自动成为全局组件，不管这个项目是否需要该组件，都会被加载，增大了开销。我们也可以选择将组件注册为局部组件，语法如下：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

注意components是复数，因为工程一般用到不止一个组件，另外，组件名的命名遵循kebab-case命名方法，即上面带有连字符的那种。也可以采用驼峰式命名（PascalCase）

new Vue({
  el: '#app',
  components: {
    'ComponentA': ComponentA,
    'ComponentB': ComponentB
  }
})

使用驼峰式命名时，自定义组件可以同时使用两种命名方式进行引用，也就是说，下面两种HTML引用都是有效的。

但是请注意，驼峰式命名在非字符串的模板中（即用‘’或“”引起来）是无效的。纯英文的自定义组件也很有可能与已有的HTML元素冲突，所以想省事，用连字符就行了。

引入外部组件

组件的出现使得模块化变成了可能，结合ES2015的module，组件也可以单独写在一个文件里

/*post-area.vue*/
export default {
        props: ['post'],
        template:
            "
" +
            "
{{ post.title }}
" +
            "
" +
            "
"
};

然后在我们页面的文件中，可以这么做

/*这里我们假设模块文件和js文件在同一目录下*/
import blogPost from './post-area.vue'
var vm1 = new Vue({
    el: '#postArea',
    data: {
        posts: [
            { id: 1, title: 'My journey with Vue' , content: '
123
4949494
'},
            { id: 2, title: 'Blogging with Vue' , content: ' 
  
 
   
  
   
 
  
 
  

    图片.png 
  
 
 

结合Ajax，应该还可以有不同的需求，感兴趣的朋友可以试试。