Vue.js 支持组件嵌套，并且子组件可访问父组件的上下文。访问组件之外的上下文违反了基于模块开发的第一原则。因此你应该尽量避免使用 this.$parent。
为什么？
组件必须相互保持独立，Vue 组件也是。如果组件需要访问其父层的上下文就违反了该原则。
如果一个组件需要访问其父组件的上下文，那么该组件将不能再其它上下文中复用。
怎么做？
通过 props 将值传递给子组件
通过 props 传递回调函数给子组件来达到调用父组件方法的目的
通过在子组件触发事件来通知父组件
谨慎使用 this.$refs
Vue.js 支持通过 ref 属性来访问其它组件和 HTML 元素。并通过 this.$refs 可以得到组件或 HTML 元素的上下文。在大多数情况下，通过 this.$refs来访问其它组件的上下文是可以避免的。在使用的的时候你需要注意避免调用了不恰当的组件 API，所以应该尽量避免使用 this.$refs。
为什么？
组件必须是保持独立的，如果一个组件的 API 不能够提供所需的功能，那么这个组件在设计、实现上是有问题的。
组件的属性和事件必须足够的给大多数的组件使用。
怎么做？
提供良好的组件 API。
总是关注于组件本身的目的。
拒绝定制代码。如果你在一个通用的组件内部编写特定需求的代码，那么代表这个组件的 API 不够通用，或者你可能需要一个新的组件来应对该需求。
检查所有的 props 是否有缺失的，如果有提一个 issue 或是完善这个组件。
检查所有的事件。子组件向父组件通信一般是通过事件来实现的，但是大多数的开发者更多的关注于 props 从忽视了这点。
Props向下传递，事件向上传递！以此为目标升级你的组件，提供良好的 API 和 独立性。
当遇到 props 和 events 难以实现的功能时，通过 this.$refs来实现。
当需要操作 DOM 无法通过指令来做的时候可使用 this..$ref 而不是 JQuery, document.getElement* , document.queryElement。
<!-- 推荐，并未使用 this.$refs --> <range :max="max" :min="min" @current-value="currentValue" :step="1"></range> <!-- 使用 this.$refs 的适用情况--> <modal ref="basicModal"> <h4>Basic Modal</h4> <button @click="$refs.basicModal.close()">Close</button> </modal> <button @click="$refs.basicModal.open()">Open modal</button> <!-- Modal component --> <template> <div v-show="active"> <!-- ... --> </div> </template> <script> export default { // ... data() { return { active: false, }; }, methods: { open() { this.active = true; }, hide() { this.active = false; }, }, // ... }; </script> <!-- 如果可通过 emited 来做则避免通过 this.$refs 直接访问 --> <template> <range :max="max" :min="min" ref="range" :step="1"></range> </template> <script> export default { // ... methods: { getRangeCurrentValue() { return this.$refs.range.currentValue; }, }, // ... }; </script>
使用组件名作为样式作用域空间
Vue.js 的组件是自定义元素，这非常适合用来作为样式的根作用域空间。可以将组件名作为 css 类的命名空间。
为什么？
给样式加上作用域空间可以避免组件样式影响外部的样式
保持模块名、目录名、样式根作用域名一样，可以很好的将其关联起来，便于开发者理解。
怎么做？
使用组件名作为样式命名的前缀，可基于 BEM 或 OOCSS 范式。同时给style标签加上 scoped 属性。加上 scoped 属性编译后会给组件的 class 自动加上唯一的前缀从而避免样式的冲突。
<style scoped> /* 推荐 */ .MyExample { } .MyExample li { } .MyExample__item { } /* 避免 */ .My-Example { } /* not scoped to component or module name, not BEM compliant */ </style>
提供组件 API 文档