Vue.js 支持通過?`ref`?屬性來訪問其它組件和 HTML 元素。并通過?`this.$refs`?可以得到組件或 HTML 元素的上下文。在大多數情況下，通過?`this.$refs`來訪問其它組件的上下文是可以避免的。在使用的的時候你需要注意避免調用了不恰當的組件 API，所以應該盡量避免使用?`this.$refs`。 ### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#為什么-8)為什么？ * 組件必須是保持獨立的，如果一個組件的 API 不能夠提供所需的功能，那么這個組件在設計、實現上是有問題的。 * 組件的屬性和事件必須足夠的給大多數的組件使用。 ### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#怎么做-8)怎么做？ * 提供良好的組件 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" :step="1" @current-value="currentValue" ></range> ~~~ ~~~ <!-- 使用 this.$refs 的適用情況--> <modal ref="basicModal"> <h4>Basic Modal</h4> <button class="primary" @click="$refs.basicModal.hide()">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" :step="1" ref="range" ></range> </template> <script> export default { // ... methods: { getRangeCurrentValue() { return this.$refs.range.currentValue }, }, // ... }; </script> ~~~