vue - vue.$ref獲取元素實例

前言

    vue中使用通過ref來獲取dom元素 ，如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例
    當 v-for 用於元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組

示例：

    普通

<input ref="input" type="text">

methods: {
  // 用來從父級組件聚焦輸入框
  focus: function () {
    this.$refs.input.focus()
    this.$refs.input.style.backgroundColor="#ff0000
  }
}

    v-for循環

<li
	 ref="menuItem"
 	v-for="(item, index) in meunList"
	class="sidebar-list" 
	@click="setPageMenu(index)">
    <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>

setPageMenu(index) {
//這個是獲取當前menuItem值，用index來區分當前元素是v-for 產生的數組中的第幾個數
    let getMenuText = this.$refs.menuItem[index].innerText;
}