$refs与$nextTick的使用

$refs-获取DOM

利用 ref 和 $refs 可以用于获取 dom 元素

1.给标签添加ref属性

2.恰当时机, 获取原生dom => this.$refs.ref的属性值

<template>
  <div>
    <h1 ref="myH1">1. ref获取原生dom</h1>
    <button @click="fn">点击修改上面内容</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    fn() {
      console.log(this.$refs.myH1); // <h1></h1> 原生DOM标签
      this.$refs.myH1.innerHTML = "改内容了";
    }
  }
}
</script>

总结: 通过id / ref, 都可以获取原生DOM标签

$refs-获取组件对象

获取组件对象, 调用组件里方法

1. 创建组件/引入组件/注册组件/使用组件
2. 组件起别名ref
3. 恰当时机, 获取组件对象

components/Child/Demo.vue

<template>
  <div>
      <p>我是Demo组件</p>
  </div>
</template>
​
<script>
export default {
    methods: {
        fn(){
            console.log("demo组件内的方法被调用了");
        }
    }
}
</script>

More.vue - 获取组件对象 - 调用组件方法

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是的h1</h1>
      <p>2. 获取组件对象 - 可调用组件内一切</p>
      <Demo ref="de"></Demo>
  </div>
</template>
​
<script>
​
import Demo from './Child/Demo'
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1
​
        let demoObj = this.$refs.de;
        demoObj.fn()
    },
    components: {
        Demo
    }
}
</script>

总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量

nextTick使用

Vue更新DOM-异步的

语法

methods: {
    Fn(){
         this.$nextTick(() => {
         	...
            console.log("DOM更新后触发$nextTick函数");
        })
    }
}

另外 $nextTick()支持promise,还可以写以下语法

methods: {
    async Fn(){
     ...
     const res = await this.$nextTick()// this.$nextTick()返回的是一个promise对象
     ...
    }
}

示例:

dom更新是异步的,直接获取内容,是拿不到更新后的值的,用$nextTick解决

<template>
  <div>
    <p id="num">数字: {{ count }}</p>
    <button @click="btn">点击+1, 观察打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    btn() {
        this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
        console.log(document.getElementById('num').innerHTML); // 0
        this.$nextTick(() => {
            console.log("DOM更新后触发$nextTick函数");
            console.log(document.getElementById('num').innerHTML); // 1
        })
    },
  },
};
</script>

总结:dom是异步更新的, $nextTick可以等待dom更新后触发此方法