如何去写组件，从什么地方开始写起，如果你对基础api已经了如指掌了，那你就可以开手动组件了，组件要学会利用几个组件的很大的特性，最大的特性我就不用说了，用props接数据，用$emit去触发事件 用v-on去接收自定义事件，有时候你会发现有时候通过父组件传递来的数据，我们在组件内部一直需要改动，那我们不得不用watch方法去复制一个复本，再进行操作，那我们有什么好办法，如更面临更多组件套组件的模式下，如果利用特性api去做最简便的写法，那就是$parent、$children、$root、$el、$refs 这五大特性。
组件规范
基于模块开发
Vue 组件命名
组件表达式简单化
组件 props 原子化
验证组件的 props
将 this 赋值给 component 变量
组件结构化
组件事件命名
避免 this.$parent
谨慎使用 this.$refs
使用组件名作为样式作用域空间
提供组件 API 文档
提供组件 demo
对组件文件进行代码校验
基于模块开发
始终基于模块的方式来构建你的 app，每一个子模块只做一件事情。
Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个模块是应用程序中独立的一个部分。
怎么做？
每一个 Vue 组件(等同于模块)首先必须专注于解决一个单一的问题，独立的, 可复用的, 微小的 and 可测试的。
如果你的组件做了太多的事或是变得臃肿，请将其拆分成更小的组件并保持单一的原则。一般来说，尽量保证每一个文件的代码行数不要超过 100 行。也请保证组件可独立的运行。比较好的做法是增加一个单独的 demo 示例。
Vue 组件命名
组件的命名需遵从以下原则：
有意义的: 不过于具体，也不过于抽象
简短: 2 到 3 个单词
具有可读性: 以便于沟通交流
同时还需要注意：
必须符合自定义元素规范: 使用连字符分隔单词，切勿使用保留字。
app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。
为什么？因为组件是通过组件名来调用的。所以组件名必须简短、富有含义并且具有可读性。
如何做？
<!-- 推荐 --> <app-header></app-header> <user-list></user-list> <range-slider></range-slider> <!-- 避免 --> <btn-group></btn-group> <!-- 虽然简短但是可读性差. 使用 `button-group` 替代 --> <ui-slider></ui-slider> <!-- ui 前缀太过于宽泛，在这里意义不明确 --> <slider></slider> <!-- 与自定义元素规范不兼容 -->
组件表达式简单化
Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很强大，但也带来潜在的复杂性。因此，你应该尽量保持表达式的简单化。
为什么？
复杂的行内表达式难以阅读。
行内表达式是不能够通用的，这可能会导致重复编码的问题。
IDE 基本上不能识别行内表达式语法，所以使用行内表达式 IDE 不能提供自动补全和语法校验功能。
怎么做？
如果你发现写了太多复杂并难以阅读的行内表达式，那么可以使用 method 或是 computed 属性来替代其功能。
<!-- 推荐 --> <template> <h1> {{ `${year}-${month}` }} </h1> </template> <script type="text/javascript"> export default { computed: { month() { return this.twoDigits((new Date()).getUTCMonth() + 1); }, year() { return (new Date()).getUTCFullYear(); } }, methods: { twoDigits(num) { return ('0' + num).slice(-2); } }, }; </script> <!-- 避免 --> <template> <h1> {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }} </h1> </template>
组件 props 原子化