ref和$refs,$nextTick异步更新

目录

ref和$refs

$nextTick 异步更新

---

ref和$refs

1.作用

利用ref 和$refs可以用于获取dom元素或组件实例

2.特点

查找范围→当前组件内(更精确稳定)

3.语法

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

⒉.获取时通过$refs获取this.$refs.chartRef 获取

mounted ({
	console.log(this. $refs.chartRef)
}

4.注意

之前只用document.querySelect('.box')获取的是整个页面中的盒子

获取dom元素

要获取谁的dom元素，就在谁的标签内加上 ref=’ ‘

ref也是组件通信的一中方法

拿到dom元素是在挂载后，mounted

{ref属性值: ref属性所在的dom或组件}

ref可以拿到组件属性和方法

例：App.vue

<template>
  <div>
    <p ref="pRef">晨起开门雪满山，雪晴云淡日光寒。</p>

    <button @click="fn">按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn () {
      console.log(this.$refs.pRef)
    }
  }
}
</script>

<style>

</style>

$nextTick 异步更新

$nextTick:等DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this . $nextTick(() =>{
    this.$refs.inp.focus()
}

注意: $nextTick内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例

数据改变---->dom更新，需要时间->等待dom更新完毕操作dom

原理：promise.then------>MutationObserver----->setImmediate---->setTimeout

App.vue

<template>
  <div>
    <button @click="fn">按钮</button>
   <input type="text" v-show="isShow" ref="textRef">
  </div>
</template>

<script>

export default {
  name: 'AppComp',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    fn () {
      console.log(this.$refs.textRef)
      this.$nextTick(() => {
        this.$refs.textRef.focus()
        this.isShow = true
      })
    }
  }
}
</script>

<style>

</style>