.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(函数体)