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