Vue---- ref 引用

---

ref 引用

1. ref 引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs指向一个空对象。

<template>
  <div>
    <h1>App 组件</h1>
    <hr>
    <button @click="getRef"> 获取 $ref </button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    getRef() {
      console.log( this )
    }
  }
}
</script>

<style>

</style>

<template>
  <div>
    <h1>App 组件</h1>
    <hr>
    <button @click="getRef"> 获取 $ref </button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    getRef() {
      console.log( this.$refs )
    }
  }
}
</script>

<style>

</style>

2. 使用 ref 引用 DOM 元素

使用 ref 引用页面上的 DOM 元素。

<template>
  <div>
    <!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
    <h1 ref="myh1">App 组件</h1>
    <hr>
    <button @click="getRef"> 获取 $ref </button>
    <br>
    <button @click="change"> App change </button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    getRef() {
      console.log( this.$refs )
    },
    change() {
	  // 通过 this.$refs.引用名称 获取对应 DOM 元素的引用
      console.log( this.$refs.myh1 )
      // 改变 h1 的字体颜色
      this.$refs.myh1.style.color = 'red'
    }
  }
}
</script>

<style>

</style>

3. 使用 ref 引用组件实例

使用 ref 引用页面上的组件实例。

与 DOM 元素一样，使用 ref 属性，为对应的组件添加引用名称。通过 this.$refs.引用名称 获取对应组件的引用。

<template>
  <div>
    <h3>Count 组件</h3>
    <div> {{count}} </div>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    }
  }
}
</script>

<style>

</style>

<template>
  <div>
    <!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
    <h1 ref="myh1">App 组件</h1>
    <hr>
    <button @click="getMyCount"> get myCount </button>
    <Count ref="myCount"></Count>
  </div>
</template>

<script>
import Count from './Count.vue'

export default {
  name: 'App',
  methods: {
    getMyCount() {
      console.log( this.$refs.myCount )
    }
  },
  components: {
    Count
  }
}
</script>

<style>

</style>

调用组件内定义的方法

<template>
  <div>
    <!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
    <h1 ref="myh1">App 组件</h1>
    <hr>
    <button @click="getMyCount"> get myCount </button>
    <button @click="countAdd"> count +1 </button>
    <Count ref="myCount"></Count>
  </div>
</template>

<script>
import Count from './Count.vue'

export default {
  name: 'App',
  methods: {
    getMyCount() {
      console.log( this.$refs.myCount )
    },
    countAdd() {
      // 调用组件内定义的 add 方法
      this.$refs.myCount.add()
    }
  },
  components: {
    Count
  }
}
</script>

<style>

</style>

4. 控制文本框和按钮的按需切换 & 让文本框自动获得焦点

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的
.focus() 方法即可。

<template>
  <div>
    <!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
    <h1 ref="myh1">App 组件</h1>
    <hr>
    <input type="text" v-show="inputVisible" ref="myipt">
    <button @click="ipt_change">ipt change</button>
  </div>
</template>

<script>
import Count from './Count.vue'

export default {
  name: 'App',
  data() {
    return {
      inputVisible: false
    }
  },
  methods: {
    ipt_change() {
      this.inputVisible = !this.inputVisible
      this.$refs.myipt.focus()
    }
  },
  components: {
    Count
  }
}
</script>

<style>

</style>

此时切换输入框的显示状态，不能实现聚焦。因为this.$refs.myipt.focus()执行时候，组件还未显示在页面上。所以无法实现聚焦，this.$refs.myipt.focus()的执行速度快于元素的显示。

5. this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。

通俗的理解是：
等组件的DOM 异步地重新渲染完成后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

对上述代码进行修改：

  methods: {
    ipt_change() {
      this.inputVisible = !this.inputVisible
      //组件的DOM 异步地重新渲染完成后，再执行 cb 回调函数。
      this.$nextTick( ()=>{
        this.$refs.myipt.focus()
      } )
    }
  },

<template>
  <div>
    <!-- 使用 ref 属性，为对应的 DOM 元素添加引用名称 -->
    <h1 ref="myh1">App 组件</h1>
    <hr>
    <input type="text" v-show="inputVisible" ref="myipt">
    <button @click="ipt_change">ipt change</button>
  </div>
</template>

<script>
import Count from './Count.vue'

export default {
  name: 'App',
  data() {
    return {
      inputVisible: false
    }
  },
  methods: {
    ipt_change() {
      this.inputVisible = !this.inputVisible
      this.$nextTick( ()=>{
        this.$refs.myipt.focus()
      } )
    }
  },
  components: {
    Count
  }
}
</script>

<style>

</style>