$refs
- $refs可以获取原生DOM和组件
- $refs获取到的是一个对象
- $refs可以获取组件所有的数据，包括组件的变量和方法
使用$refs
- 给标签或者组件添加ref属性
- 然后使用$refs获取
- 创建组件（demo.vue）
<template>
<div>
<p>demo组件</p>
</div>
</template>
<script>
export default {
data () {
return {
msg :'demo组件'
}
},
methods:{
fn(){
console.log(demo的方法);
}
}
}
</script>
<style>
</style>
- 创建vue文件引入demo组件
<template>
<div>
<!-- 通过ref属性获取dom元素和组件对象 -->
<p>获取dom元素</p>
<h1 id="h1" ref="myh1">hello vue</h1>
<demo ref="de"></demo>
</div>
</template>
<script>
import demo from "./components/demo.vue";
export default {
mounted(){
// 通过ref属性获取dom元素
console.log(document.querySelector('#h1')); // 使用原生方式获取DOM
console.log(this.$refs.myh1); //使用$refs获取DOM
console.log(1,this.$refs.de); //使用$refs获取组件对象
console.log(2,this.$refs.de.fn); //使用$refs获取组件的方法
console.log(3,this.$refs.de.msg); //使用$refs获取组件的变量
},
components:{
demo
}
}
</script>
<style>
</style>
$nextTick的使用
-
作用：Vue 更新DOM是异步的，因此想要获取同步的DOM就需要使用$nextTick()方法
-
$nextTick()返回的是Promise对象
-
$nextTick()获取DOM的方式
- this.$nextTick(function(){})
- this.$nextTick().then(()=>{})
- await this.$nextTick()
代码
<template>
<div>
<!-- $nextTick解决data更新异步问题 -->
<p ref="p1">{{count}}</p>
<button @click="btn">点击</button>
</div>
</template>
<script>
export default {
data () {
return {
count:0
}
},
methods:{
btn(){
this.count++
console.log(this.$refs.p1.innerHTML); //0
this.$nextTick(()=>{
console.log(this.$refs.p1.innerHTML); //1
})
}
}
}
</script>
<style>
</style>
