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;
}