写Vue就是在写一个个的组件

vue最精髓的就是它的组件与组件化，写一个vue工程，其实就是在写一个个的组件。

组件的分类：

1. vue-router 产生的每个页面。
2. 不包含业务，独立、具体功能的组件。 通用性组件。(在任意项目中都可以用得到)
3. 业务组件。多个业务中会被复用。（业务组件，只能在当前业务中进行）

组件的构成：

一个组件是由 props，event，slot 三部分构成一个组件。

组件之间的通信：

vue.js内置的通信方式有两种：

1. ref 给元素设置注册引用信息。
2. $parent / $children ： 分别访问父级、访问子级。这种有弊端就是无法在跨级或兄弟间通信。
3. provide 、inject 通信法。类似于 react的上下文

 

也可以用app 当做一个主的存储空间。类似于如下，我们将app.vue的整个实例通过provide 对外提供出去。

// app.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>export default {
    provide () {
      return {
        app: this
      }
    }
  }

  </script>

我们如上声明了一个 provide，并且将整个app.vue的实例this 对外提供，命名为app。接下来，我们在当前项目中的任何组件（或者路由）只要通过inject 注入app.vue的app 这个字段，我们都可以通过 this.app.xxx 来访问app.vue的 data，computed、methods 等内容。

已知我们这里有个问题，就是当我们修改了个人资料后，这时一开始在app.vue里获取的 userInfo 就已经不是我最新的了，我们则需要重新获取。

我们的解决办法是，在当前页面修改过后，使用 this.app.xxx 去让app.vue里重新更新获取最新值即可。

project,inject最好的使用办法，则是在某个组件中使用。如：你封装了一个表单，这个表单下有一些子组件，子组件需要获取父组件的一些状态，这时候你用它是没啥错的。

4. mixins。混入

我们也可以使用混入方式来将一个模板页面(组件)混入到需要的组件或者页面之中。

// 模板组件  a.vue
export default {
    data () {
        return {
            name : 'zhaomin'        
        }            
    }
}

// 使用页面/组件
import a from './a.vue'
export default {
    mixins: [a],
    data () {
            
    },
    created() {
        console.log(this.name) // zhaomin    
    }
}