导语：今天给大家讲解vue的组件化开发知识，本文参考vue的部分文档知识。

目录

• 组件命名
• 全局组件
• 局部组件
• 父子组件通信
• 组件命名

组件命名

每一个组件都代表不同的含义，有着不同的功能，比如说注册组件就是专门用来做用户注册时候使用的，分页组件就是专门用作表格列表分页使用。所以不同功能的组件都有不同的名字，组件的命名一般有以下两个方法。

短横线命名法

kebab-case，这是官方推荐的方法，也就是两个单词之间使用短横线连接起来。

例如：

Vue.component('my-page', { /*...*/ })

小驼峰命名法

PascalCase，顾名思义，就是首字母大小，但是直接在DOM(非字符串的模板中)使用时只有短横线命名法的组件是有效的。

例如：

Vue.component('MyPage', { /*...*/ })

全局注册

全局注册的组件在任何vue实例的模板中都可以使用，在子组件也是这样。

例如：我这里创建一个全局组件component-a。

Vue.component('my-page', { /*...*/ })
new Vue({
  el: '#app',
})

在html模板中就可以使用了。

<div id="app">
  <my-page></my-page>
</div>

局部注册

局部注册，就是只能在一个Vue实例中使用，不能在其他Vue实例中使用。

例如：js创建一个局部注册组件。

var MyPage = { /**/ }
new Vue({
  el: '#app',
  components: {
    'my-page': MyPage,
  }
})

在html模板中就可以使用了。

<div id="app">
  <my-page></my-page>
</div>

这样就可以非常灵活，不会增加无谓的消耗增加js。

父子组件通信

当我们注册好了组件后，就要学会进行父子组件通信，传递消息。

• 首先，我们先创建一个子组件my-post

var MyPost = Vue.component('my-post', {
  props: {
    post: Object,
  },
  template: `
    <div class="post">
     <h2 class="post-title">{{ post.title }}</h2>
     <p class="post-content">{{ post.content }}</p>
     <a class="post-link" href="#">{{ post.link }}</a>
    </div>
  `
})

• 接着注册到Vue实例

new Vue({
  el: '#app',
  data: {
    post: {
      title: '文章标题',
      content: '文章内容',
      link: '#1'
    }
  },
  components: {
    'my-post': MyPost,
  }
})

• 最后在模板里面使用

<div id="app">
  <my-post :post="post"></my-post>
</div>

最后

Vue组件的一些常用知识就介绍到这里，下次再会。