vue----$refs / $nextTick

$refs获取DOM

利用ref和$refs获取DOM元素

<template>
  <div>
    <p>获取原生Dom元素</p>
    <h1 id="myH" ref="myH">我是一名学员</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    // console.log(document.getElementById('myH'))
    /* 
    1:给标签定义ref属性
    2：通过this.$refs.属性名  获取元素
    */
    console.log(this.$refs.myH)
  },
}
</script>

$refs获取组件对象

• 创建组件MyProduct.vue

<template>
  <div>MyProduct组件</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello',
    }
  },
  methods: {
    fn() {
      console.log('组件被调用了')
    },
  },
}
</script>

• 获取组件对象，调用组件方法

<template>
  <div>
    <h2>获取组件对象--可以调用组件内的一切</h2>
    <my-product ref="myP"></my-product>
  </div>
</template>

<script>
/* 
 1：创建组件/引入组件/注册组件/使用组件
 2: 给组件起别名 ref
 3: 恰当时机，获取组件对象
*/
import MyProduct from './components/MyProduct'
export default {
  components: {
    MyProduct,
  },
  mounted() {
    let myPobj = this.$refs.myP
    console.log(myPobj.msg)
    myPobj.fn()
  },
}
</script>

$nextTick

vue更新DOM--异步的

需求:点击count++,通过原生DOM拿标签内容，无法拿到新值

<template>
  <div>
    <h2>$nextTick</h2>
    <p ref="myP">
      {{ count }}
    </p>
    <button @click="addCount">count++</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    addCount() {
      this.count++ //vue监听数据更新，开启一个DOM更新队列(异步任务)
      // console.log(this.$refs.myP.innerHTML) //0

      /* 
         vue更新DOM 异步任务
         解决:this.$nextTick
         过程: DOM更新完会挨个触发$nextTick里的函数体
      */
      this.$nextTick(() => {
        console.log(this.$refs.myP.innerHTML)
      })
    },
  },
}
</script>