$refs:获取原生dom标签.
父组件代码
<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h1>37-refs</h1>
<!-- 1. 添加一个ref属性 -->
<h2 ref="refH2">获取 dom元素 或者 组件</h2>
<button @click="fn">获取dom</button>
<MyCom ref="refMyCom"/>
<button @click="fn2">获取子组件</button>
</div>
</template>
<script>
// 导入->注册->使用
import MyCom from './MyCom.vue'
export default {
components: { MyCom },
methods: {
fn() {
// 1. 获取dom原生的方式
// document.querySelector("h2").innerHTML = "abc"
// 2. 获取dom原生的方式2 this.$refs.ref的值
console.log(this.$refs.refH2.innerHTML)
},
fn2() {
// 为所欲为
// console.log(this.$refs.refMyCom)
// console.log(this.$refs.refMyCom.num)
// this.$refs.refMyCom.num = 1
this.$refs.refMyCom.fn(1000)
}
}
}
</script>
<style>
</style>
子组件代码
<template>
<div style="border:1px solid #ccc; margin:5px;padding:5px">
<h2>子组件</h2>
num: {{num}}
</div>
</template>
<script>
export default {
// 2.子接
data(){
return {
num: 100
}
},
methods: {
fn(n){
this.num = n
console.log('子组件的函数')
}
}
}
</script>
<style>
</style>
ref可以用来获取dom或组件实例对象的方法.
$nextTick的用法.
因为数据的变化而导致的dom更新是异步的.所以这个时候我们就要用到.$nextTick方法.
我们用一串代码来验证一下
<template>
<div>
<p id="num">数字: {{ count }}</p>
<button @click="btn">点击+1, 观察打印</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
btn() {
this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
console.log(document.getElementById("num").innerHTML); // 0
},
},
};
</script>
把上面的代码在vue中运行.然后把输出的结果在控制台打印一下观察有什么变化.
点击button按钮控制台打印出来的结果
页面打印出来的结果
数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
语法
this.$nextTick(回调函数)
在页面中打印出来.观察结果.
从结果中可以看到.代码同步了.
