一个包含 DOM 元素和组件实例的对象,通过模板引用注册。
警告
关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
可以理解只能显式的获取关联的组件
this.refs为undifind,举例:
父组件:Father.vue
js<template>
<div>
<button @click="showChild()">点击</button>
<child ref="Child" :childVsible="childVsible"/>
</div>
</template>
<script>
import child from './Child';
export default {
components: { child },
data() {
return {
childVsible: false, //默认隐藏子组件
}
},
methods:{
showChild(){
this.childVsible = true;
this.$refs.test();
}
}
</script>
子组件:Child.vue
js<template>
<div ref="Child">
<div>我是你爸爸</div>
</div>
</template>
<script>
import child from './Child';
export default {
methods:{
test(){
console.log("我才是你爸爸!!")
}
}
</script>
这个时候点击 点击 按钮会提示undefind,为什么呢?应该是refs还没加载出来,所以取不到(待确认),这时候加一个$nextTick
即可解决问题,修改父组件的showChild
方法
js methods:{
showChild(){
this.childVsible = true;
this.$nextTick(() => {
this.$refs.test();
});
}
}
本文作者:Joker
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!