虽然 Vue.js 支持传递复杂的 JavaScript 对象通过 props 属性，但是你应该尽可能的使用原始类型的数据。尽量只使用JavaScript 原始类型(字符串、数字、布尔值) 和 函数。尽量避免复杂的对象。
为什么？
使得组件 API 清晰直观
只使用原始类型和函数作为 props 使得组件的 API 更接近于 HTML(5) 原生元素。
其它开发者更好的理解每一个 prop 的含义、作用
传递过于复杂的对象使得我们不能够清楚的知道哪些属性或方法被自定义组件使用，这使得代码难以重构和维护。
怎么做？
组件的每一个属性单独使用一个 props，并且使用函数或是原始类型的值。
<!-- 推荐 --> <range-slider :values="[10, 20]" min="0" max="100" step="5" :on-slide="updateInputs" :on-end="updateResults"> </range-slider> <!-- 避免 --> <range-slider :config="complexConfigObject"></range-slider>
验证组件的 props
在 Vue.js 中，组件的 props 即 API，一个稳定并可预测的 API 会使得你的组件更容易被其他开发者使用。
组件 props 通过自定义标签的属性来传递。属性的值可以是 Vue.js 字符串( :attr="value" 或 v-bind:attr="value" )或是不传。你需要保证组件的 props 能应对不同的情况。
为什么？
验证组件 props 可以保证你的组件永远是可用的(防御性编程)。即使其他开发者并未按照你预想的方法使用时也不会出错。
怎么做？
提供默认值
使用 type 属性校验类型
使用 props 之前先检查该 prop 是否存在
<template> <input type="range" v-model="value" :max="max" :min="min"> </template> <script type="text/javascript"> export default { props: { max: { type: Number, // 这里添加了数字类型的校验 default() { return 10; }, }, min: { type: Number, default() { return 0; }, }, value: { type: Number, default() { return 4; }, }, }, }; </script>
将 this 赋值给 component 变量(
在 Vue.js 组件上下文中，this指向了组件实例。因此当你切换到了不同的上下文时，要确保 this 指向一个可用的 component 变量。
换句话说，不要在编写这样的代码 const self = this; ，而是应该直接使用变量 component。
为什么？
将组件 this 赋值给变量 component可用让开发者清楚的知道任何一个被使用的地方，它代表的是组件实例。
怎么做？
<script type="text/javascript"> export default { methods: { hello() { return 'hello'; }, printHello() { console.log(this.hello()); }, }, }; </script> <!-- 避免 --> <script type="text/javascript"> export default { methods: { hello() { return 'hello'; }, printHello() { const self = this; // 没有必要 console.log(self.hello()); }, }, }; </script>
组件结构化
按照一定的结构组织，使得组件便于理解。
为什么？
导出一个清晰、组织有序的组件，使得代码易于阅读和理解。同时也便于标准化。
按首字母排序属性，data, computed, watches 和 methods 使得属性便于查找。
合理组织，使得组件易于阅读。(name; extends; props, data and computed; components; watch and methods; lifecycle methods, 等）
使用 name 属性。借助于Vue devtools可以让你更方便的测试。
合理的 CSS 结构，如 BEM 或 oocss - 详情?;。
使用单文件 .Vue 文件格式来组件代码。
怎么做——组件结构化
<template lang="html"> <div> <!-- ... --> </div> </template> <script type="text/javascript"> export default { // 不要忘记了 name 属性 name: 'RangeSlider', // 组合其它组件 extends: {}, // 组件属性、变量 props: { bar: {}, // 按字母顺序 foo: {}, fooBar: {}, }, // 变量 data() {}, computed: {}, // 使用其它组件 components: {}, // 方法 watch: {}, methods: {}, // 生命周期函数 beforeCreate() {}, mounted() {}, }; </script> <style scoped> .Ranger__Wrapper { /* ... */ } </style>
组件事件命名
Vue.js 提供的处理函数和表达式都是绑定在 ViewModel 上的，组件的每一个事件都应该按照一个好的命名规范来，这样可以避免不少的开发问题，具体可见如下 为什么。
为什么？
开发者可以随意给事件命名，即使是原生事件的名字，这样会带来迷惑性。
过于宽松的事件命名可能与DOM模板不兼容。
怎么做？
事件命名也连字符命名
一个事件的名字对应组件外的一组意义操作，如：upload-success, upload-error 以及 dropzone-upload-success, dropzone-upload-error （如果需要前缀的话）。
事件命名应该以动词（如 client-api-load）或是形容词（如 drive-upload-success）结尾。（出处）
避免this.$parent