Vue(9)——.sync修饰符、ref和$refs、$nextTick

.sync

作用:可以实现子组件与父组件数据的双向绑定，简化代码。

特点：prop属性名，可以自定义，非固定位value

场景：封装弹框类的基础组件，visible属性  true显示，false隐藏

本质：就是 :属性名和@update:属性名合写。

 

ref和$refs 

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

特点：查找范围→当前组件内（更精确稳定）

获取dom

1.目标标签-添加ref属性

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

获取dom元素实例： 

 

获取组件实例：

然后就可以调用getValues方法和resetValues方法。 

 

Vue异步更新和$nextTick

<template>
  <div>
    <div v-if="isshow">
      <input ref="inp" v-model="editValue" type="text">
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="change">编辑</button>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      title:'大标题',
      editValue:'',
      isshow:false
    }
  },
  methods:{
    change(){
      //显示输入框
      this.isshow = true
      //获取焦点
      this.$refs.inp.focus()
    }
  }
}
</script>

 点击编辑，出现文本框，但是没有获取焦点。原因是vue是异步dom更新。

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

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