$nextTick、$refs和组件name属性

$refs

$refs 获取DOM元素

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

特点： 查找范围--->当前组件内(更精确稳定)

• 目标标签---添加ref属性

• 恰当时机，通过this.$refs.xxx 获取目标标签

<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 获取组件对象

可以调用组件内的一切

 步骤

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

• 创建组件MyProduct.vue

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

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

• 获取组件对象，调用组件方法（App.vue）

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

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

$nextTick

vue更新DOM-异步的

需求:编辑标题，编辑框自动聚焦

• 点击编辑，显示编辑框

• 让编辑框，立刻获取焦点

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

语法 this.$nextTick(函数体)

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

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

<template>
    <div>
        <p ref="myP">{{ count }}</p>
        <button @click="addCount">+1</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里面的函数体,
            $nextTick 确保在 DOM 更新后立即执行一段代码
            */
            this.$nextTick(() => {
                console.log(this.$refs.myP.innerHTML)
            })
        }
    }
}
</script>

 场景

点击搜索按钮，弹出文本框并获取焦点，按钮消失

<template>
  <div>
    <button @click="btnFn" v-if="isShow">搜索</button>
    <input type="text" v-else placeholder="这是一个文本框" ref="myInp">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    async btnFn() {
      this.isShow = false
      // this.$refs.myInp.focus()
      // 原因：DOM更新是异步的 文本框还没有挂载到真实DOM上

      // this.$nextTick(() => {
      //   this.$refs.myInp.focus()
      // })
      // 等同于
      // await取代回调函数
      await this.$nextTick()
      this.$refs.myInp.focus()
    },
  },
}
</script>

组件name使用

可以用组件的name属性值，来注册组件名字

我们封装的组件，可以自己定义name属性组件名，让使用者有个统一的前缀风格

components/MyCom.vue 

<template>
    <div>我是一个Com组件</div>
</template>

<script>
export default {
   name: 'ComNameHaHa', // 注册时可以定义自己的名字
}
</script>

App.vue中注册和使用

<template>
  <div>
    <ComNameHaHa></ComNameHaHa>
  </div>
</template>

<script>
import Comfrom './components/MyCom.vue';
export default {
  components: {
    [Com.name]: Com, // 对象里的key是变量的话 [] 属性名表达式
    // 相当于
    // ComNameHaHa: Com,
  }
}
</script>